vue.config.js 3.0 KB

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