vue.config.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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. /**
  8. * check production or preview(pro.loacg.com only)
  9. * @returns {boolean}
  10. */
  11. function isProd () {
  12. return process.env.NODE_ENV === 'production'
  13. }
  14. // 项目部署基础
  15. // 默认情况下,我们假设你的应用将被部署在域的根目录下,
  16. // 例如:https://www.my-app.com/
  17. // 默认:'/'
  18. // 如果您的应用程序部署在子路径中,则需要在这指定子路径
  19. // 例如:https://www.foobar.com/my-app/
  20. // 需要将它改为'/my-app/'
  21. const BASE_URL = isProd ? '/' : '/'
  22. const assetsCDN = {
  23. css: [],
  24. // https://unpkg.com/browse/vue@2.6.10/
  25. js: [
  26. '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
  27. '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
  28. '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
  29. '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
  30. ]
  31. }
  32. // webpack build externals
  33. const prodExternals = {
  34. vue: 'Vue',
  35. 'vue-router': 'VueRouter',
  36. vuex: 'Vuex',
  37. axios: 'axios'
  38. }
  39. // vue.config.js
  40. const vueConfig = {
  41. runtimeCompiler: true, // 动态编译组件
  42. publicPath: BASE_URL,
  43. configureWebpack: {
  44. // webpack plugins
  45. plugins: [
  46. // Ignore all locale files of moment.js
  47. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  48. ],
  49. // if prod is on, add externals
  50. externals: isProd() ? prodExternals : {}
  51. },
  52. chainWebpack: (config) => {
  53. config.resolve.alias
  54. .set('@$', resolve('src'))
  55. const svgRule = config.module.rule('svg')
  56. svgRule.uses.clear()
  57. svgRule
  58. .oneOf('inline')
  59. .resourceQuery(/inline/)
  60. .use('vue-svg-icon-loader')
  61. .loader('vue-svg-icon-loader')
  62. .end()
  63. .end()
  64. .oneOf('external')
  65. .use('file-loader')
  66. .loader('file-loader')
  67. .options({
  68. name: 'assets/[name].[hash:8].[ext]'
  69. })
  70. // if prod is on
  71. // assets require on cdn
  72. if (isProd()) {
  73. config.plugin('html').tap(args => {
  74. args[0].cdn = assetsCDN
  75. return args
  76. })
  77. }
  78. },
  79. css: {
  80. loaderOptions: {
  81. less: {
  82. modifyVars: {
  83. // less vars锛宑ustomize ant design theme
  84. 'primary-color': process.env.VUE_APP_THEME_COLOR,
  85. 'link-color': process.env.VUE_APP_THEME_COLOR
  86. // 'border-radius-base': '4px'
  87. },
  88. // do not remove this line
  89. javascriptEnabled: true
  90. }
  91. }
  92. },
  93. devServer: {
  94. // development server port 8000
  95. port: 8000,
  96. // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
  97. proxy: {
  98. '/api': {
  99. // target: 'http://192.168.16.100:9102/at-it/',
  100. // target: 'https://aitour-it.test.zyucgj.com/at-it',
  101. target: 'https://aitour-it.qiubcar.com/at-it',
  102. ws: false,
  103. changeOrigin: true,
  104. pathRewrite: {
  105. '^/api': ''
  106. }
  107. }
  108. }
  109. },
  110. // disable source map in production
  111. productionSourceMap: false,
  112. assetsDir: 'static',
  113. lintOnSave: undefined,
  114. // babel-loader no-ignore node_modules/*
  115. transpileDependencies: []
  116. }
  117. // preview.pro.loacg.com only do not use in your production;
  118. if (process.env.VUE_APP_PREVIEW === 'true') {
  119. console.log('VUE_APP_PREVIEW', true)
  120. // add `ThemeColorReplacer` plugin to webpack plugins
  121. vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  122. }
  123. module.exports = vueConfig