vue.config.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  2. const ThemeColorReplacer = require('webpack-theme-color-replacer')
  3. const forElementUI = require('webpack-theme-color-replacer/forElementUI')
  4. const cdnDependencies = require('./dependencies-cdn')
  5. const HtmlInjectConfigPlugin = require('./plugins/html-inject-config-plugin')
  6. const path = require('path')
  7. const { chain, set, each } = require('lodash')
  8. // 拼接路径
  9. const resolve = dir => path.join(__dirname, dir)
  10. // 增加环境变量
  11. process.env.VUE_APP_VERSION = require('./package.json').version
  12. process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss')
  13. const elementColor = process.env.VUE_APP_ELEMENT_COLOR
  14. // 基础路径 注意发布之前要先修改这里
  15. const publicPath = process.env.VUE_APP_PUBLIC_PATH || '/'
  16. console.log(process.env)
  17. // If your port is set to 80,
  18. // use administrator privileges to execute the command line.
  19. // For example, Mac: sudo npm run
  20. // You can change the port by the following method:
  21. // port = 9528 npm run dev OR npm run dev --port = 9528
  22. const port = process.env.port || process.env.npm_config_port || 1111// dev port
  23. // 是否启动Gzip
  24. const enableGzip = process.env.VUE_APP_GZ === 'true'
  25. // 是否启动CDN
  26. const enableCDN = process.env.VUE_APP_CDN === 'true'
  27. // =========CDN 处理=============
  28. // 设置不参与构建的库
  29. const externals = {}
  30. let cdn = {}
  31. if (enableCDN) {
  32. cdnDependencies.forEach(pkg => { externals[pkg.name] = pkg.library })
  33. // 引入文件的 cdn 链接
  34. cdn = {
  35. css: cdnDependencies.map(e => e.css).filter(e => e),
  36. js: cdnDependencies.map(e => e.js).filter(e => e)
  37. }
  38. }
  39. // ============CDN end==========
  40. // 多页配置,默认未开启,如需要请参考 https://cli.vuejs.org/zh/config/#pages
  41. const pages = undefined
  42. // const pages = {
  43. // index: './src/main.js',
  44. // subpage: './src/subpage.js'
  45. // }
  46. module.exports = {
  47. // 根据你的实际情况更改这里
  48. publicPath,
  49. lintOnSave: true,
  50. devServer: {
  51. publicPath, // 和 publicPath 保持一致
  52. port,
  53. disableHostCheck: process.env.NODE_ENV === 'development' // 关闭 host check,方便使用 ngrok 之类的内网转发工具
  54. },
  55. css: {
  56. loaderOptions: {
  57. // 设置 scss 公用变量文件
  58. sass: {
  59. /* sass-loader 9.0+写法*/
  60. additionalData(content, loaderContext) {
  61. const { resourcePath, rootContext } = loaderContext
  62. const relativePath = path.relative(rootContext, resourcePath)
  63. if (
  64. relativePath.replace(/\\/g, '/') !== 'src/assets/styles/public.scss'
  65. ) {
  66. return '@import "~@/assets/styles/public.scss";' + content
  67. }
  68. return content
  69. }
  70. }
  71. }
  72. },
  73. pages,
  74. configureWebpack: config => {
  75. const configNew = {}
  76. if (process.env.NODE_ENV === 'production') {
  77. configNew.externals = externals
  78. if (enableGzip) {
  79. configNew.plugins = [
  80. // gzip
  81. new CompressionWebpackPlugin({
  82. filename: '[path].gz[query]',
  83. test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
  84. threshold: 10240,
  85. minRatio: 0.8,
  86. deleteOriginalAssets: false
  87. })
  88. ]
  89. }
  90. }
  91. return configNew
  92. },
  93. // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。
  94. transpileDependencies: [
  95. 'signature_pad',
  96. 'vue-echarts',
  97. 'resize-detector'
  98. ],
  99. // 默认设置: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js
  100. chainWebpack: config => {
  101. /**
  102. * 添加 CDN 参数到 htmlWebpackPlugin 配置中
  103. * 已适配多页
  104. */
  105. const htmlPluginNames = chain(pages).keys().map(page => 'html-' + page).value()
  106. const targetHtmlPluginNames = htmlPluginNames.length ? htmlPluginNames : ['html']
  107. each(targetHtmlPluginNames, name => {
  108. config.plugin(name).tap(options => {
  109. set(options, '[0].cdn', process.env.NODE_ENV === 'production' ? cdn : [])
  110. return options
  111. })
  112. })
  113. // 在html文件注入配置文件
  114. config.plugin('HtmlInjectConfigPlugin').use(HtmlInjectConfigPlugin, [publicPath])
  115. /**
  116. * 删除懒加载模块的 prefetch preload,降低带宽压力
  117. * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
  118. * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
  119. * 而且预渲染时生成的 prefetch 标签是 modern 版本的,低版本浏览器是不需要的
  120. */
  121. config.plugins
  122. .delete('prefetch')
  123. .delete('preload')
  124. // 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
  125. config.resolve
  126. .symlinks(true)
  127. config
  128. .plugin('theme-color-replacer')
  129. .use(ThemeColorReplacer, [{
  130. fileName: 'css/theme-colors.[contenthash:8].css',
  131. // matchColors: [
  132. // ...forElementUI.getElementUISeries(elementColor) // Element-ui主色系列
  133. // ],
  134. externalCssFiles: ['./node_modules/element-ui/lib/theme-chalk/index.css'], // optional, String or string array. Set external css files (such as cdn css) to extract colors.
  135. changeSelector: forElementUI.changeSelector
  136. }])
  137. config
  138. // 开发环境 sourcemap 不包含列信息
  139. .when(process.env.NODE_ENV === 'development',
  140. config => config.devtool('cheap-source-map')
  141. )
  142. config.when(process.env.NODE_ENV !== 'development' && !enableCDN,
  143. (config) => {
  144. config.performance.set('hints', false)
  145. config.devtool('none')
  146. config.optimization.splitChunks({
  147. chunks: 'all',
  148. cacheGroups: {
  149. libs: {
  150. name: 'chunk-libs',
  151. test: /[\\/]node_modules[\\/]/,
  152. priority: 10,
  153. chunks: 'initial' // 仅打包最初依赖的第三方
  154. },
  155. elementUI: {
  156. name: 'chunk-elementUI', // elementUI拆分为一个包
  157. priority: 20, // 权重需要大于libs和app,否则将打包到libs或app中
  158. test: /[\\/]node_modules[\\/]_?element-ui(.*)/
  159. },
  160. commons: {
  161. name: 'chunk-commons',
  162. test: resolve('src/components'), // 可以自定义您的规则
  163. minChunks: 3,
  164. priority: 5,
  165. reuseExistingChunk: true
  166. }
  167. }
  168. })
  169. })
  170. // markdown
  171. config.module
  172. .rule('md')
  173. .test(/\.md$/)
  174. .use('text-loader')
  175. .loader('text-loader')
  176. .end()
  177. // svg
  178. const svgRule = config.module.rule('svg')
  179. svgRule.uses.clear()
  180. svgRule
  181. .include
  182. .add(resolve('src/assets/svg-icons/icons'))
  183. .end()
  184. .use('svg-sprite-loader')
  185. .loader('svg-sprite-loader')
  186. .options({
  187. symbolId: 'ibps-[name]'
  188. })
  189. .end()
  190. // image exclude
  191. const imagesRule = config.module.rule('images')
  192. imagesRule
  193. .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
  194. .exclude
  195. .add(resolve('src/assets/svg-icons/icons'))
  196. .end()
  197. // 重新设置 alias
  198. config.resolve.alias
  199. .set('@api', resolve('src/api'))
  200. .set('vue$', 'vue/dist/vue.esm.js')
  201. // 分析工具
  202. if (process.env.npm_config_report) {
  203. config
  204. .plugin('webpack-bundle-analyzer')
  205. .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  206. }
  207. },
  208. // 不输出 map 文件
  209. productionSourceMap: false,
  210. // i18n
  211. pluginOptions: {
  212. i18n: {
  213. locale: 'zh-CN',
  214. fallbackLocale: 'en',
  215. localeDir: 'locales',
  216. enableInSFC: true
  217. }
  218. }
  219. }