vue.config.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const createThemeColorReplacerPlugin = require('./config/plugin.config')
  4. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  5. const productionGzipExtensions = ['js', 'css']
  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. const assetsCDN = {
  17. css: [],
  18. // https://unpkg.com/browse/vue@2.6.10/
  19. js: [
  20. 'cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
  21. 'cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
  22. 'cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
  23. 'cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
  24. ]
  25. }
  26. // webpack build externals
  27. const prodExternals = {
  28. vue: 'Vue',
  29. 'vue-router': 'VueRouter',
  30. vuex: 'Vuex',
  31. axios: 'axios'
  32. }
  33. // vue.config.js
  34. const vueConfig = {
  35. configureWebpack: {
  36. // webpack plugins
  37. plugins: [
  38. // Ignore all locale files of moment.js
  39. new webpack.IgnorePlugin({
  40. resourceRegExp: /^\.\/locale$/,
  41. contextRegExp: /moment$/
  42. })
  43. ]
  44. // if prod is on, add externals
  45. // externals: isProd() ? prodExternals : {}
  46. },
  47. chainWebpack: (config) => {
  48. config.resolve.alias
  49. .set('@$', resolve('src'))
  50. config.plugins.delete('preload')
  51. config.plugins.delete('prefetch')
  52. const svgRule = config.module.rule('svg')
  53. svgRule.uses.clear()
  54. svgRule
  55. .oneOf('inline')
  56. .resourceQuery(/inline/)
  57. .use('vue-svg-icon-loader')
  58. .loader('vue-svg-icon-loader')
  59. .end()
  60. .end()
  61. .oneOf('external')
  62. .use('file-loader')
  63. .loader('file-loader')
  64. .options({
  65. name: 'assets/[name].[hash:8].[ext]'
  66. })
  67. // if prod is on
  68. // assets require on cdn
  69. /* if (isProd()) {
  70. config.plugin('html').tap(args => {
  71. args[0].cdn = assetsCDN
  72. return args
  73. })
  74. } */
  75. },
  76. css: {
  77. loaderOptions: {
  78. less: {
  79. modifyVars: {
  80. // less vars,customize ant design theme
  81. // 'primary-color': '#F5222D',
  82. // 'link-color': '#F5222D',
  83. // 'border-radius-base': '4px'
  84. },
  85. // do not remove this line
  86. javascriptEnabled: true
  87. }
  88. }
  89. },
  90. devServer: {
  91. // development server port 8000
  92. port: 8000,
  93. // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
  94. proxy: {
  95. '/api': {
  96. target: 'http://localhost:5000',
  97. ws: false,
  98. changeOrigin: true,
  99. pathRewrite: {
  100. '^/api': ''
  101. }
  102. },
  103. '/files': {
  104. target: 'http://localhost:5000',
  105. ws: false,
  106. changeOrigin: true
  107. },
  108. '/websocket': {
  109. target: 'ws://localhost:5000',
  110. ws: true,
  111. changeOrigin: false,
  112. logLevel: 'debug',
  113. secure: false
  114. }
  115. }
  116. },
  117. // disable source map in production
  118. productionSourceMap: false,
  119. lintOnSave: undefined,
  120. // babel-loader no-ignore node_modules/*
  121. transpileDependencies: []
  122. }
  123. // preview.pro.loacg.com only do not use in your production;
  124. // if (process.env.VUE_APP_PREVIEW === 'true') {
  125. // console.log('VUE_APP_PREVIEW', true)
  126. // // add `ThemeColorReplacer` plugin to webpack plugins
  127. // vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  128. // }
  129. vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  130. if (isProd()) {
  131. vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({
  132. filename: '[path].gz[query]', // 提示 compression-webpack-plugin@3.0.0以上的话asset改为filename
  133. algorithm: 'gzip',
  134. test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
  135. threshold: 1024,
  136. minRatio: 0.8
  137. }))
  138. }
  139. module.exports = vueConfig