vue.config.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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. BASE_URL + 'js/vue.min.js',
  27. BASE_URL + 'js/vue-router.min.js',
  28. BASE_URL + 'js/vuex.min.js',
  29. BASE_URL + 'js/axios.min.js'
  30. // BASE_URL + 'js/echarts.min.js'
  31. ]
  32. }
  33. // webpack build externals
  34. const prodExternals = {
  35. vue: 'Vue',
  36. 'vue-router': 'VueRouter',
  37. vuex: 'Vuex',
  38. axios: 'axios'
  39. }
  40. // vue.config.js
  41. const vueConfig = {
  42. runtimeCompiler: true, // 动态编译组件
  43. publicPath: BASE_URL,
  44. configureWebpack: {
  45. // webpack plugins
  46. plugins: [
  47. // Ignore all locale files of moment.js
  48. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  49. ],
  50. // if prod is on, add externals
  51. externals: isProd() ? prodExternals : {},
  52. },
  53. chainWebpack: (config) => {
  54. config.resolve.alias
  55. .set('@$', resolve('src'))
  56. const svgRule = config.module.rule('svg')
  57. svgRule.uses.clear()
  58. svgRule
  59. .oneOf('inline')
  60. .resourceQuery(/inline/)
  61. .use('vue-svg-icon-loader')
  62. .loader('vue-svg-icon-loader')
  63. .end()
  64. .end()
  65. .oneOf('external')
  66. .use('file-loader')
  67. .loader('file-loader')
  68. .options({
  69. name: 'assets/[name].[hash:8].[ext]'
  70. })
  71. // if prod is on
  72. // assets require on cdn
  73. if (isProd()) {
  74. config.plugin('html').tap(args => {
  75. args[0].cdn = assetsCDN
  76. return args
  77. })
  78. }
  79. },
  80. css: {
  81. loaderOptions: {
  82. less: {
  83. modifyVars: {
  84. // less vars锛宑ustomize ant design theme
  85. 'primary-color': process.env.VUE_APP_THEME_COLOR,
  86. 'link-color': process.env.VUE_APP_THEME_COLOR
  87. // 'border-radius-base': '4px'
  88. },
  89. // do not remove this line
  90. javascriptEnabled: true
  91. }
  92. }
  93. },
  94. devServer: {
  95. // development server port 8000
  96. port: 8000,
  97. // If you want to turn on the proxy, please remosve the mockjs /src/main.jsL11
  98. proxy: {
  99. '/api': {
  100. // target: 'http://192.168.2.10/ocs-admin',
  101. // target: 'https://t.ocs.360arrow.com/ocs-admin', // 练习
  102. target: 'https://p.ocs.360arrow.com/ocs-admin', // 预发布
  103. ws: false,
  104. changeOrigin: true,
  105. pathRewrite: {
  106. '^/api': ''
  107. }
  108. }
  109. }
  110. },
  111. // disable source map in production
  112. productionSourceMap: false,
  113. assetsDir: 'static',
  114. lintOnSave: undefined,
  115. // babel-loader no-ignore node_modules/*
  116. transpileDependencies: []
  117. }
  118. // preview.pro.loacg.com only do not use in your production;
  119. if (process.env.VUE_APP_PREVIEW === 'true') {
  120. console.log('VUE_APP_PREVIEW', true)
  121. // add `ThemeColorReplacer` plugin to webpack plugins
  122. vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
  123. }
  124. module.exports = vueConfig