vue.config.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const GitRevisionPlugin = require('git-revision-webpack-plugin')
  4. const GitRevision = new GitRevisionPlugin()
  5. const buildDate = JSON.stringify(new Date().toLocaleString())
  6. const createThemeColorReplacerPlugin = require('./config/plugin.config')
  7. function resolve (dir) {
  8. return path.join(__dirname, dir)
  9. }
  10. // check Git
  11. function getGitHash () {
  12. try {
  13. return GitRevision.version()
  14. } catch (e) {}
  15. return 'unknown'
  16. }
  17. const isProd = process.env.NODE_ENV === 'production'
  18. const assetsCDN = {
  19. // webpack build externals
  20. externals: {
  21. vue: 'Vue',
  22. 'vue-router': 'VueRouter',
  23. vuex: 'Vuex',
  24. axios: 'axios'
  25. },
  26. css: [],
  27. // https://unpkg.com/browse/vue@2.6.10/
  28. js: [
  29. '//cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
  30. '//cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js',
  31. '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
  32. '//cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js'
  33. ]
  34. }
  35. // vue.config.js
  36. const vueConfig = {
  37. configureWebpack: {
  38. // webpack plugins
  39. plugins: [
  40. // Ignore all locale files of moment.js
  41. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  42. new webpack.DefinePlugin({
  43. APP_VERSION: `"${require('./package.json').version}"`,
  44. GIT_HASH: JSON.stringify(getGitHash()),
  45. BUILD_DATE: buildDate
  46. })
  47. ],
  48. // if prod, add externals
  49. externals: isProd ? assetsCDN.externals : {}
  50. },
  51. chainWebpack: config => {
  52. config.resolve.alias.set('@$', resolve('src'))
  53. const svgRule = config.module.rule('svg')
  54. svgRule.uses.clear()
  55. svgRule
  56. .oneOf('inline')
  57. .resourceQuery(/inline/)
  58. .use('vue-svg-icon-loader')
  59. .loader('vue-svg-icon-loader')
  60. .end()
  61. .end()
  62. .oneOf('external')
  63. .use('file-loader')
  64. .loader('file-loader')
  65. .options({
  66. name: 'assets/[name].[hash:8].[ext]'
  67. })
  68. // if prod is on
  69. // assets require on cdn
  70. if (isProd) {
  71. config.plugin('html').tap(args => {
  72. args[0].cdn = assetsCDN
  73. return args
  74. })
  75. }
  76. },
  77. css: {
  78. loaderOptions: {
  79. less: {
  80. modifyVars: {
  81. // less vars,customize ant design theme
  82. // 'primary-color': '#F5222D',
  83. // 'link-color': '#F5222D',
  84. 'border-radius-base': '2px'
  85. },
  86. // DO NOT REMOVE THIS LINE
  87. javascriptEnabled: true
  88. }
  89. }
  90. },
  91. devServer: {
  92. // development server port 8000
  93. port: 8000
  94. // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
  95. // proxy: {
  96. // '/api': {
  97. // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
  98. // ws: false,
  99. // changeOrigin: true
  100. // }
  101. // }
  102. },
  103. // disable source map in production
  104. productionSourceMap: false,
  105. lintOnSave: false,
  106. // babel-loader no-ignore node_modules/*
  107. transpileDependencies: []
  108. }
  109. // preview.pro.loacg.com only do not use in your production;
  110. if (process.env.VUE_APP_PREVIEW === 'true') {
  111. console.log('VUE_APP_PREVIEW', true)
  112. // add `ThemeColorReplacer` plugin to webpack plugins
  113. vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  114. }
  115. module.exports = vueConfig