const path = require('path')
const webpack = require('webpack')
const createThemeColorReplacerPlugin = require('./config/plugin.config')
// const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, dir)
}
const isProd = process.env.NODE_ENV === 'production'
const isMicroService = isProd ? true : false // 是否开启微服务 (默认develop开发环境不开启)
// const isMicroService = true
console.log('isProd => ', isProd)
console.log('isMicroService => ', isMicroService)
// 微服务需要多一级目录 /garnet /basalt ...
const proxy = isMicroService ? {
'/api': {
target: process.env.VUE_APP_API_BASE_URL,
ws: false,
changeOrigin: true,
pathRewrite: {
'^/api': '' // 需要rewrite的,
}
}
} : {
'/api/garnet': {
target: process.env.VUE_APP_API_BASE_URL,
ws: false,
changeOrigin: true,
pathRewrite: {
'^/api/garnet': '' // 需要rewrite的,
}
},
'/api/basalt': {
target: process.env.VUE_APP_API_BASE_URL,
ws: false,
changeOrigin: true,
pathRewrite: {
'^/api/basalt': '' // 需要rewrite的,
}
},
'/api/jasper': {
target: process.env.VUE_APP_API_BASE_URL,
ws: false,
changeOrigin: true,
pathRewrite: {
'^/api/jasper': '' // 需要rewrite的,
}
}
}
const assetsCDN = {
// webpack build externals
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
},
css: [],
// https://unpkg.com/browse/vue@2.6.10/
js: [
'/static/js/vue.min.js',
'/static/js/vue-router.min.js',
'/static/js/vuex.min.js',
'/static/js/axios.min.js'
]
}
// vue.config.js
const vueConfig = {
configureWebpack: {
// webpack plugins
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
// if prod, add externals
externals: isProd ? assetsCDN.externals : {}
},
chainWebpack: (config) => {
config.resolve.alias
.set('@$', resolve('src'))
/* config.plugin('monaco').use(new MonacoWebpackPlugin()) */
// config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.oneOf('inline')
.resourceQuery(/inline/)
.use('vue-svg-icon-loader')
.loader('vue-svg-icon-loader')
.end()
.end()
.oneOf('external')
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]'
})
config.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end()
// if prod is on
// assets require on cdn
if (isProd) {
config.plugin('html').tap(args => {
args[0].cdn = assetsCDN
return args
})
}
},
css: {
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#245083',
'layout-color': '#245083',
'border-radius-base': '2px'
},
// DO NOT REMOVE THIS LINE
javascriptEnabled: true
}
}
},
devServer: {
disableHostCheck: true,
host: process.env.VUE_PROXY_HOST,
port: 8001,
proxy
},
// disable source map in production
productionSourceMap: false,
lintOnSave: false,
// babel-loader no-ignore node_modules/*
transpileDependencies: []
}
// preview.pro.loacg.com only do not use in your production;
if (process.env.VUE_APP_PREVIEW === 'true') {
// eslint-disable-next-line no-labels
// runtimeCompiler: true,
// add `ThemeColorReplacer` plugin to webpack plugins
vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
}
module.exports = vueConfig
vue.config.js 文件配置
于 2022-07-17 16:31:48 首次发布