vue.config.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const createThemeColorReplacerPlugin = require('./config/plugin.config')
  4. // gzip 压缩
  5. const compressionWebpackPlugin = require('compression-webpack-plugin'); //引入插件
  6. function resolve (dir) {
  7. return path.join(__dirname, dir)
  8. }
  9. /**
  10. * check production or preview(pro.loacg.com only)
  11. * @returns {boolean}
  12. */
  13. function isProd () {
  14. return process.env.NODE_ENV === 'production'
  15. }
  16. // 项目部署基础
  17. // 默认情况下,我们假设你的应用将被部署在域的根目录下,
  18. // 例如:https://www.my-app.com/
  19. // 默认:'/'
  20. // 如果您的应用程序部署在子路径中,则需要在这指定子路径
  21. // 例如:https://www.foobar.com/my-app/
  22. // 需要将它改为'/my-app/'
  23. const BASE_URL = isProd ? '/' : '/'
  24. const assetsCDN = {
  25. css: [],
  26. // https://unpkg.com/browse/vue@2.6.10/
  27. js: [
  28. '//vuepkg.oss-cn-beijing.aliyuncs.com/vue.min.js',
  29. '//vuepkg.oss-cn-beijing.aliyuncs.com/vue-router.min.js',
  30. '//vuepkg.oss-cn-beijing.aliyuncs.com/vuex.min.js',
  31. '//vuepkg.oss-cn-beijing.aliyuncs.com/axios.min.js',
  32. '//vuepkg.oss-cn-beijing.aliyuncs.com/lodash.min.js',
  33. '//vuepkg.oss-cn-beijing.aliyuncs.com/echarts.min.js'
  34. ]
  35. }
  36. // webpack build externals
  37. const prodExternals = {
  38. vue: 'Vue',
  39. 'vue-router': 'VueRouter',
  40. vuex: 'Vuex',
  41. axios: 'axios',
  42. echarts: 'echarts',
  43. lodash : {
  44. commonjs: "lodash",
  45. amd: "lodash",
  46. root: "_" // indicates global variable
  47. },
  48. 'mockjs2': 'Mock'
  49. }
  50. // vue.config.js
  51. const vueConfig = {
  52. runtimeCompiler: true, // 动态编译组件
  53. publicPath: BASE_URL,
  54. configureWebpack: {
  55. // webpack plugins
  56. plugins: [
  57. // Ignore all locale files of moment.js
  58. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  59. new compressionWebpackPlugin({
  60. //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
  61. filename: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的话asset改为filename
  62. //可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
  63. algorithm: 'gzip',
  64. //所有匹配该正则的资源都会被处理。默认值是全部资源。
  65. test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
  66. //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
  67. threshold: 10240,
  68. //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
  69. minRatio: 0.8
  70. })
  71. ],
  72. // if prod is on, add externals
  73. externals: isProd() ? prodExternals : {}
  74. },
  75. chainWebpack: (config) => {
  76. config.resolve.alias
  77. .set('@$', resolve('src'))
  78. const svgRule = config.module.rule('svg')
  79. svgRule.uses.clear()
  80. svgRule
  81. .oneOf('inline')
  82. .resourceQuery(/inline/)
  83. .use('vue-svg-icon-loader')
  84. .loader('vue-svg-icon-loader')
  85. .end()
  86. .end()
  87. .oneOf('external')
  88. .use('file-loader')
  89. .loader('file-loader')
  90. .options({
  91. name: 'assets/[name].[hash:8].[ext]'
  92. })
  93. // if prod is on
  94. // assets require on cdn
  95. if (isProd()) {
  96. config.plugin('html').tap(args => {
  97. args[0].cdn = assetsCDN
  98. return args
  99. })
  100. }
  101. // 分析打包大小
  102. if (process.env.npm_config_report) {
  103. config.plugin('webpack-bundle-analyzer')
  104. .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  105. .end();
  106. }
  107. },
  108. css: {
  109. sourceMap: false,
  110. loaderOptions: {
  111. less: {
  112. modifyVars: {
  113. // less vars锛宑ustomize ant design theme
  114. 'primary-color': process.env.VUE_APP_THEME_COLOR,
  115. 'link-color': process.env.VUE_APP_THEME_COLOR
  116. // 'border-radius-base': '4px'
  117. },
  118. // do not remove this line
  119. javascriptEnabled: true
  120. }
  121. }
  122. },
  123. devServer: {
  124. // development server port 8000
  125. port: 8000,
  126. disableHostCheck: true,
  127. // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
  128. proxy: {
  129. '/api': {
  130. target: 'http://192.168.16.105:8503/qpls-md',
  131. // target: 'http://p.iscm.360arrow.com/qpls-md',
  132. // ws: false,
  133. ws: true,
  134. changeOrigin: true,
  135. pathRewrite: {
  136. '^/api': ''
  137. }
  138. }
  139. }
  140. },
  141. // disable source map in production
  142. productionSourceMap: false,
  143. assetsDir: 'static',
  144. lintOnSave: undefined,
  145. // babel-loader no-ignore node_modules/*
  146. transpileDependencies: []
  147. }
  148. // preview.pro.loacg.com only do not use in your production;
  149. if (process.env.VUE_APP_PREVIEW === 'true') {
  150. console.log('VUE_APP_PREVIEW', true)
  151. // add `ThemeColorReplacer` plugin to webpack plugins
  152. vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  153. }
  154. module.exports = vueConfig