vue.config.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const createThemeColorReplacerPlugin = require('./config/plugin.config')
  4. function resolve (dir) {
  5. return path.join(__dirname, dir)
  6. }
  7. /**
  8. * check production or preview(pro.loacg.com only)
  9. * @returns {boolean}
  10. */
  11. function isProd () {
  12. return process.env.NODE_ENV === 'production'
  13. }
  14. // 项目部署基础
  15. // 默认情况下,我们假设你的应用将被部署在域的根目录下,
  16. // 例如:https://www.my-app.com/
  17. // 默认:'/'
  18. // 如果您的应用程序部署在子路径中,则需要在这指定子路径
  19. // 例如:https://www.foobar.com/my-app/
  20. // 需要将它改为'/my-app/'
  21. const BASE_URL = isProd ? '/' : '/'
  22. const assetsCDN = {
  23. css: [],
  24. // https://unpkg.com/browse/vue@2.6.10/
  25. js: [
  26. '//vuepkg.oss-cn-beijing.aliyuncs.com/vue.min.js',
  27. '//vuepkg.oss-cn-beijing.aliyuncs.com/vue-router.min.js',
  28. '//vuepkg.oss-cn-beijing.aliyuncs.com/vuex.min.js',
  29. '//vuepkg.oss-cn-beijing.aliyuncs.com/axios.min.js'
  30. ]
  31. }
  32. // webpack build externals
  33. const prodExternals = {
  34. vue: 'Vue',
  35. 'vue-router': 'VueRouter',
  36. vuex: 'Vuex',
  37. axios: 'axios'
  38. }
  39. // vue.config.js
  40. const vueConfig = {
  41. runtimeCompiler: true, // 动态编译组件
  42. publicPath: BASE_URL,
  43. configureWebpack: {
  44. // webpack plugins
  45. plugins: [
  46. // Ignore all locale files of moment.js
  47. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  48. ],
  49. // if prod is on, add externals
  50. externals: isProd() ? prodExternals : {}
  51. },
  52. chainWebpack: (config) => {
  53. config.resolve.alias
  54. .set('@$', resolve('src'))
  55. const svgRule = config.module.rule('svg')
  56. svgRule.uses.clear()
  57. svgRule
  58. .oneOf('inline')
  59. .resourceQuery(/inline/)
  60. .use('vue-svg-icon-loader')
  61. .loader('vue-svg-icon-loader')
  62. .end()
  63. .end()
  64. .oneOf('external')
  65. .use('file-loader')
  66. .loader('file-loader')
  67. .options({
  68. name: 'assets/[name].[hash:8].[ext]'
  69. })
  70. // if prod is on
  71. // assets require on cdn
  72. if (isProd()) {
  73. config.plugin('html').tap(args => {
  74. args[0].cdn = assetsCDN
  75. return args
  76. })
  77. }
  78. },
  79. css: {
  80. loaderOptions: {
  81. less: {
  82. modifyVars: {
  83. // less vars锛宑ustomize ant design theme
  84. 'primary-color': process.env.VUE_APP_THEME_COLOR,
  85. 'link-color': process.env.VUE_APP_THEME_COLOR
  86. // 'border-radius-base': '4px'
  87. },
  88. // do not remove this line
  89. javascriptEnabled: true
  90. }
  91. }
  92. },
  93. devServer: {
  94. // development server port 8000
  95. port: 8000,
  96. disableHostCheck: true,
  97. // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
  98. proxy: {
  99. '/api': {
  100. target: 'http://p.xprh.360arrow.com/xprh-admin',
  101. // target: 'http://192.168.0.115:8701/xprh-admin',
  102. // ws: false,
  103. ws: true,
  104. changeOrigin: true,
  105. pathRewrite: {
  106. '^/api': ''
  107. }
  108. }
  109. }
  110. },
  111. // disable source map in production
  112. productionSourceMap: false,
  113. assetsDir: 'static',
  114. lintOnSave: undefined,
  115. // babel-loader no-ignore node_modules/*
  116. transpileDependencies: []
  117. }
  118. // preview.pro.loacg.com only do not use in your production;
  119. if (process.env.VUE_APP_PREVIEW === 'true') {
  120. console.log('VUE_APP_PREVIEW', true)
  121. // add `ThemeColorReplacer` plugin to webpack plugins
  122. vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  123. }
  124. module.exports = vueConfig