vue.config.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const createThemeColorReplacerPlugin = require('./config/plugin.config')
  4. function resolve (dir) {
  5. return path.join(__dirname, dir)
  6. }
  7. const isProd = process.env.NODE_ENV === 'production'
  8. const assetsCDN = {
  9. // webpack build externals
  10. externals: {
  11. vue: 'Vue',
  12. 'vue-router': 'VueRouter',
  13. vuex: 'Vuex',
  14. axios: 'axios'
  15. },
  16. css: [],
  17. // https://unpkg.com/browse/vue@2.6.10/
  18. js: [
  19. '//lib.baomitu.com/vue/2.6.10/vue.min.js',
  20. '//lib.baomitu.com/vue-router/3.1.3/vue-router.min.js',
  21. '//lib.baomitu.com/vuex/3.1.1/vuex.min.js',
  22. '//lib.baomitu.com/axios/0.19.0/axios.min.js'
  23. ]
  24. }
  25. // vue.config.js
  26. const vueConfig = {
  27. // 部署应用包时的基本 URL
  28. publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  29. configureWebpack: {
  30. // webpack plugins
  31. plugins: [
  32. // Ignore all locale files of moment.js
  33. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  34. ],
  35. // if prod, add externals
  36. externals: isProd ? assetsCDN.externals : {}
  37. },
  38. chainWebpack: (config) => {
  39. config.resolve.alias
  40. .set('@$', resolve('src'))
  41. const svgRule = config.module.rule('svg')
  42. svgRule.uses.clear()
  43. svgRule
  44. .oneOf('inline')
  45. .resourceQuery(/inline/)
  46. .use('vue-svg-icon-loader')
  47. .loader('vue-svg-icon-loader')
  48. .end()
  49. .end()
  50. .oneOf('external')
  51. .use('file-loader')
  52. .loader('file-loader')
  53. .options({
  54. name: 'assets/[name].[hash:8].[ext]'
  55. })
  56. // if prod is on
  57. // assets require on cdn
  58. if (isProd) {
  59. config.plugin('html').tap(args => {
  60. args[0].cdn = assetsCDN
  61. return args
  62. })
  63. }
  64. },
  65. css: {
  66. // 定位css文件
  67. sourceMap: true,
  68. loaderOptions: {
  69. less: {
  70. modifyVars: {
  71. // less vars,customize ant design theme
  72. // 'primary-color': '#F5222D',
  73. // 'link-color': '#F5222D',
  74. 'border-radius-base': '2px'
  75. },
  76. // DO NOT REMOVE THIS LINE
  77. javascriptEnabled: true
  78. }
  79. }
  80. },
  81. /**
  82. * 开发环境proxy代理 [用于跨域]
  83. */
  84. devServer: {
  85. // development server port 8000
  86. port: 8000
  87. // If you want to turn on the proxy, please remove the mockjs /src/main.js L11
  88. // proxy: {
  89. // '/api': {
  90. // target: 'https://www.abc.com/index.php/admin',
  91. // ws: false,
  92. // changeOrigin: true,
  93. // pathRewrite: {
  94. // '/api': ''
  95. // }
  96. // }
  97. // }
  98. },
  99. // disable source map in production
  100. productionSourceMap: false,
  101. lintOnSave: undefined,
  102. // babel-loader no-ignore node_modules/*
  103. transpileDependencies: []
  104. }
  105. // preview.pro.loacg.com only do not use in your production;
  106. if (process.env.VUE_APP_PREVIEW === 'true') {
  107. console.log('VUE_APP_PREVIEW', true)
  108. // add `ThemeColorReplacer` plugin to webpack plugins
  109. vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  110. }
  111. module.exports = vueConfig