vue.config.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. /**
  2. * @description vue.config.js全局配置
  3. */
  4. const path = require('path')
  5. const {
  6. baseURL,
  7. publicPath,
  8. assetsDir,
  9. outputDir,
  10. lintOnSave,
  11. transpileDependencies,
  12. title,
  13. abbreviation,
  14. devPort,
  15. providePlugin,
  16. build7z,
  17. buildGzip,
  18. imageCompression,
  19. } = require('./src/config')
  20. const rely = require('vue-plugin-rely')
  21. const { webpackBarName, webpackBanner } = require('./vab.config')
  22. const { version, author } = require('./package.json')
  23. const Webpack = require('webpack')
  24. const WebpackBar = require('webpackbar')
  25. const FileManagerPlugin = require('filemanager-webpack-plugin')
  26. const dayjs = require('dayjs')
  27. const dateTime = dayjs().format('YYYY-M-D HH:mm:ss')
  28. const CompressionWebpackPlugin = require('compression-webpack-plugin')
  29. const productionGzipExtensions = ['html', 'js', 'css', 'svg']
  30. process.env.VUE_APP_TITLE = title
  31. process.env.VUE_APP_AUTHOR = author
  32. process.env.VUE_APP_UPDATE_TIME = dateTime
  33. process.env.VUE_APP_VERSION = version
  34. process.env.VUE_APP_RELY = rely
  35. const resolve = (dir) => {
  36. return path.join(__dirname, dir)
  37. }
  38. module.exports = {
  39. publicPath,
  40. assetsDir,
  41. outputDir,
  42. lintOnSave,
  43. transpileDependencies,
  44. devServer: {
  45. hot: true,
  46. port: devPort,
  47. open: true,
  48. noInfo: false,
  49. overlay: {
  50. warnings: true,
  51. errors: true,
  52. },
  53. // 注释掉的地方是前端配置代理访问后端的示例
  54. // baseURL必须为/xxx,而不是后端服务器,请先了解代理逻辑,再设置前端代理
  55. // !!!一定要注意!!!
  56. // 1.这里配置了跨域及代理只针对开发环境生效
  57. // 2.不建议你在前端配置跨域,建议你后端配置Allow-Origin,Method,Headers,放行token字段,一步到位
  58. // 3.后端配置了跨域,就不需要前端再配置,会发生Origin冲突
  59. proxy: {
  60. [baseURL]: {
  61. // target: `http://api.ygys.site.ximengnaikang.com/admin`,
  62. target: `http://api.lab.site.xmnk.cn/admin`,
  63. ws: true,
  64. changeOrigin: true,
  65. pathRewrite: {
  66. ['^' + baseURL]: '',
  67. },
  68. },
  69. },
  70. after: require('./mock'),
  71. },
  72. configureWebpack() {
  73. return {
  74. resolve: {
  75. alias: {
  76. '~': resolve('.'),
  77. '@': resolve('src'),
  78. },
  79. },
  80. plugins: [
  81. new Webpack.ProvidePlugin(providePlugin),
  82. new WebpackBar({
  83. name: webpackBarName,
  84. }),
  85. ],
  86. }
  87. },
  88. chainWebpack(config) {
  89. config.resolve.symlinks(true)
  90. config.module.rule('svg').exclude.add(resolve('src/icon'))
  91. config.module
  92. .rule('vabIcon')
  93. .test(/\.svg$/)
  94. .include.add(resolve('src/icon'))
  95. .end()
  96. .use('svg-sprite-loader')
  97. .loader('svg-sprite-loader')
  98. .options({ symbolId: 'vab-icon-[name]' })
  99. config.when(process.env.NODE_ENV === 'development', (config) => {
  100. config.devtool('source-map')
  101. })
  102. config.when(process.env.NODE_ENV === 'production', (config) => {
  103. config.performance.set('hints', false)
  104. config.devtool('none')
  105. config.optimization.splitChunks({
  106. automaticNameDelimiter: '-',
  107. chunks: 'all',
  108. cacheGroups: {
  109. chunk: {
  110. name: 'chunk',
  111. test: /[\\/]node_modules[\\/]/,
  112. minSize: 131072,
  113. maxSize: 524288,
  114. chunks: 'async',
  115. minChunks: 2,
  116. priority: 10,
  117. },
  118. vue: {
  119. name: 'vue',
  120. test: /[\\/]node_modules[\\/](vue(.*)|core-js)[\\/]/,
  121. chunks: 'initial',
  122. priority: 20,
  123. },
  124. elementUI: {
  125. name: 'element-ui',
  126. test: /[\\/]node_modules[\\/]element-ui(.*)[\\/]/,
  127. priority: 30,
  128. },
  129. extra: {
  130. name: 'extra',
  131. test: resolve('src/extra'),
  132. priority: 40,
  133. },
  134. // 根据使用模块抽取公共代码
  135. // echarts: {
  136. // name: 'echarts',
  137. // test: /[\\/]node_modules[\\/](echarts|zrender|tslib)[\\/]/,
  138. // priority: 50,
  139. // },
  140. },
  141. })
  142. config
  143. .plugin('banner')
  144. .use(Webpack.BannerPlugin, [`${webpackBanner}${dateTime}`])
  145. if (imageCompression)
  146. config.module
  147. .rule('images')
  148. .use('image-webpack-loader')
  149. .loader('image-webpack-loader')
  150. .options({
  151. bypassOnDebug: true,
  152. })
  153. .end()
  154. if (buildGzip)
  155. config.plugin('compression').use(CompressionWebpackPlugin, [
  156. {
  157. filename: '[path][base].gz[query]',
  158. algorithm: 'gzip',
  159. test: new RegExp(
  160. '\\.(' + productionGzipExtensions.join('|') + ')$'
  161. ),
  162. threshold: 8192,
  163. minRatio: 0.8,
  164. },
  165. ])
  166. if (build7z)
  167. config.plugin('fileManager').use(FileManagerPlugin, [
  168. {
  169. events: {
  170. onEnd: {
  171. archive: [
  172. {
  173. source: `./${outputDir}`,
  174. destination: `./${outputDir}/${abbreviation}_${dayjs().unix()}.zip`,
  175. },
  176. ],
  177. },
  178. },
  179. },
  180. ])
  181. })
  182. },
  183. runtimeCompiler: true,
  184. productionSourceMap: false,
  185. css: {
  186. requireModuleExtension: true,
  187. sourceMap: true,
  188. loaderOptions: {
  189. scss: {
  190. additionalData(content, loaderContext) {
  191. const { resourcePath, rootContext } = loaderContext
  192. const relativePath = path.relative(rootContext, resourcePath)
  193. if (
  194. relativePath.replace(/\\/g, '/') !==
  195. 'src/vab/styles/variables/variables.scss'
  196. )
  197. return '@import "~@/vab/styles/variables/variables.scss";' + content
  198. return content
  199. },
  200. },
  201. },
  202. },
  203. }