You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

127 lines
4.1 KiB

3 years ago
  1. 'use strict'
  2. const path = require('path')
  3. const buildConf = require('./build.config')
  4. const packageConf = require('./package.json')
  5. function resolve(dir) {
  6. return path.join(__dirname, dir)
  7. }
  8. module.exports = {
  9. // 基础配置 详情看文档
  10. publicPath: './',
  11. outputDir: 'dist',
  12. assetsDir: 'static',
  13. lintOnSave: process.env.NODE_ENV === 'development',
  14. productionSourceMap: false,
  15. devServer: {
  16. port: process.env.VUE_APP_CLI_PORT,
  17. open: true,
  18. overlay: {
  19. warnings: false,
  20. errors: true
  21. },
  22. proxy: {
  23. // 把key的路径代理到target位置
  24. // detail: https://cli.vuejs.org/config/#devserver-proxy
  25. [process.env.VUE_APP_BASE_API]: { // 需要代理的路径 例如 '/api'
  26. target: `${process.env.VUE_APP_BASE_PATH}:${process.env.VUE_APP_SERVER_PORT}/`, // 代理到 目标路径
  27. changeOrigin: true,
  28. pathRewrite: { // 修改路径数据
  29. ['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除
  30. }
  31. }
  32. }
  33. },
  34. configureWebpack: {
  35. // @路径走src文件夹
  36. resolve: {
  37. alias: {
  38. '@': resolve('src')
  39. }
  40. }
  41. },
  42. chainWebpack(config) {
  43. // set preserveWhitespace
  44. config.module
  45. .rule('vue')
  46. .use('vue-loader')
  47. .loader('vue-loader')
  48. .tap(options => {
  49. options.compilerOptions.preserveWhitespace = true
  50. return options
  51. })
  52. .end()
  53. config
  54. // https://webpack.js.org/configuration/devtool/#development
  55. .when(process.env.NODE_ENV === 'development',
  56. config => config.devtool('cheap-source-map')
  57. )
  58. config
  59. .when(process.env.NODE_ENV !== 'development',
  60. config => {
  61. // 不打包 begin
  62. // 1.目前已经测试通过[vue,axios,echarts]可以cdn引用,其它组件测试通过后可继续添加
  63. // 2.此处添加不打包后,需在public/index.html head中添加相应cdn资源链接
  64. config.set('externals', buildConf.cdns.reduce((p, a) => {
  65. p[a.name] = a.scope
  66. return p
  67. }, {}))
  68. // 不打包 end
  69. config.plugin('html')
  70. .tap(args => {
  71. if (buildConf.title) {
  72. args[0].title = buildConf.title
  73. }
  74. if (buildConf.cdns.length > 0) {
  75. args[0].cdns = buildConf.cdns.map(conf => {
  76. if (conf.path) {
  77. conf.js = `${buildConf.baseCdnUrl}${conf.path}`
  78. } else {
  79. conf.js = `${buildConf.baseCdnUrl}/${conf.name}/${packageConf.dependencies[conf.name].replace('^', '')}/${conf.name}.min.js`
  80. }
  81. return conf
  82. })
  83. }
  84. return args
  85. })
  86. config
  87. .plugin('ScriptExtHtmlWebpackPlugin')
  88. .after('html')
  89. .use('script-ext-html-webpack-plugin', [{
  90. // `runtime` must same as runtimeChunk name. default is `runtime`
  91. inline: /single\..*\.js$/
  92. }])
  93. .end()
  94. config
  95. .optimization.splitChunks({
  96. chunks: 'all',
  97. cacheGroups: {
  98. libs: {
  99. name: 'chunk-libs',
  100. test: /[\\/]node_modules[\\/]/,
  101. priority: 10,
  102. chunks: 'initial' // only package third parties that are initially dependent
  103. },
  104. elementUI: {
  105. name: 'chunk-elementUI', // split elementUI into a single package
  106. priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
  107. test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
  108. },
  109. commons: {
  110. name: 'chunk-commons',
  111. test: resolve('src/components'), // can customize your rules
  112. minChunks: 3, // minimum common number
  113. priority: 5,
  114. reuseExistingChunk: true
  115. }
  116. }
  117. })
  118. config.optimization.runtimeChunk('single')
  119. }
  120. )
  121. }
  122. }