解决 vue-cli3 多入口打包 BASE_URL is not defined
修改 vue.config.js 文件即可。主要修改方式为使用 configureWebpack 来修改 webpack 的配置，在 config.plugins 中增加 HtmlWebpackPlugin 。
注意，如果使用的模板里面包含全局变量 BASE_URL 的话，需要使用 templateParameters 注入变量的值，否则会报错 BASE_URL is not defined 。
网上的大多数方式都是去修改模板 BASE_URL 为 htmlWebpackPlugin.options.url ，却几乎没有提及 HtmlWebpackPlugin 的 templateParameters 参数。
- 修改前
module.exports = {
//路径前缀
publicPath: "/",
lintOnSave: true,
productionSourceMap: false,
chainWebpack: (config) => {
//忽略的打包文件
config.externals({
‘vue‘: ‘Vue‘,
‘vue-router‘: ‘VueRouter‘,
‘vuex‘: ‘Vuex‘,
‘axios‘: ‘axios‘,
‘element-ui‘: ‘ELEMENT‘,
});
const entry = config.entry(‘app‘);
entry.add(‘babel-polyfill‘).end();
entry.add(‘classlist-polyfill‘).end();
entry.add(‘@/mock‘).end();
},
};
- 修改后
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) // 安装并引用插件
module.exports = {
//路径前缀
publicPath: "/",
lintOnSave: true,
productionSourceMap: false,
configureWebpack: config => {
config.plugins = [
new HtmlWebpackPlugin({
templateParameters: {
BASE_URL: `/`
},
entry: ‘src/main.js‘,
template: ‘public/index.html‘,
filename: ‘index2.html‘,
}),
...config.plugins,
]
console.log(`输出最终应用的 config`, JSON.stringify(config, null, 2))
},
chainWebpack: (config) => {
//忽略的打包文件
config.externals({
‘vue‘: ‘Vue‘,
‘vue-router‘: ‘VueRouter‘,
‘vuex‘: ‘Vuex‘,
‘axios‘: ‘axios‘,
‘element-ui‘: ‘ELEMENT‘,
});
const entry = config.entry(‘app‘);
entry.add(‘babel-polyfill‘).end();
entry.add(‘classlist-polyfill‘).end();
entry.add(‘@/mock‘).end();
},
};