vue.config.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. 'use strict'
  2. const path = require('path')
  3. function resolve(dir) {
  4. return path.join(__dirname, dir)
  5. }
  6. const port = 8000 // dev port
  7. const name = 'shop'
  8. module.exports = {
  9. publicPath: './',
  10. outputDir: 'dist',
  11. assetsDir: 'static',
  12. lintOnSave: false,
  13. productionSourceMap: false,
  14. devServer: {
  15. port: port,
  16. open: true,
  17. overlay: {
  18. warnings: false,
  19. errors: true
  20. },
  21. proxy: {
  22. [process.env.VUE_APP_BASE_API]: {
  23. target: `https://www.workark.com/prod-api/admin-api`, //不使用mock模拟数据直接请求flash-api服务
  24. changeOrigin: true,
  25. pathRewrite: {
  26. ['^' + process.env.VUE_APP_BASE_API]: ''
  27. }
  28. }
  29. }
  30. // after: require('./mock/mock-server.js')
  31. },
  32. configureWebpack: {
  33. // provide the app's title in webpack's name field, so that
  34. // it can be accessed in index.html to inject the correct title.
  35. name: name,
  36. resolve: {
  37. alias: {
  38. '@': resolve('src')
  39. }
  40. }
  41. },
  42. chainWebpack(config) {
  43. config.plugins.delete('preload')
  44. config.plugins.delete('prefetch')
  45. // set svg-sprite-loader
  46. config.module
  47. .rule('svg')
  48. .exclude.add(resolve('src/icons'))
  49. .end()
  50. config.module
  51. .rule('icons')
  52. .test(/\.svg$/)
  53. .include.add(resolve('src/icons'))
  54. .end()
  55. .use('svg-sprite-loader')
  56. .loader('svg-sprite-loader')
  57. .options({
  58. symbolId: 'icon-[name]'
  59. })
  60. .end()
  61. // set preserveWhitespace
  62. config.module
  63. .rule('vue')
  64. .use('vue-loader')
  65. .loader('vue-loader')
  66. .tap(options => {
  67. options.compilerOptions.preserveWhitespace = true
  68. return options
  69. })
  70. .end()
  71. config
  72. // https://webpack.js.org/configuration/devtool/#development
  73. .when(process.env.NODE_ENV === 'development',
  74. config => config.devtool('cheap-source-map')
  75. )
  76. config
  77. .when(process.env.NODE_ENV !== 'development',
  78. config => {
  79. config
  80. .plugin('ScriptExtHtmlWebpackPlugin')
  81. .after('html')
  82. .use('script-ext-html-webpack-plugin', [{
  83. // `runtime` must same as runtimeChunk name. default is `runtime`
  84. inline: /runtime\..*\.js$/
  85. }])
  86. .end()
  87. config
  88. .optimization.splitChunks({
  89. chunks: 'all',
  90. cacheGroups: {
  91. libs: {
  92. name: 'chunk-libs',
  93. test: /[\\/]node_modules[\\/]/,
  94. priority: 10,
  95. chunks: 'initial' // only package third parties that are initially dependent
  96. },
  97. elementUI: {
  98. name: 'chunk-elementUI', // split elementUI into a single package
  99. priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
  100. test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
  101. },
  102. commons: {
  103. name: 'chunk-commons',
  104. test: resolve('src/components'), // can customize your rules
  105. minChunks: 3, // minimum common number
  106. priority: 5,
  107. reuseExistingChunk: true
  108. }
  109. }
  110. })
  111. config.optimization.runtimeChunk('single')
  112. }
  113. )
  114. }
  115. }