我维护的一个多入口多出口的项目,每个出口文件夹中的html都有同级的config.js文件,其中记录一些配置信息,可以如下配置vue.config.js,为每一个html输出指定config.js
// @vue/cli配置文档https://cli.vuejs.org/zh/config/#vue-config-js
module.exports = {
...
// webpack-plugin-copy
config.plugin("copy").tap(() => {
const arr = [[]];
const copy = [
{
key: "page1", dir: "page1" },
{
key: "page2", dir: "page2" },
];
for (let i of copy) {
arr[0].push({
from: "public/config-plugin.js",
to: i.dir + "/config.js",
transform(content) {
// 在此处自定义 config-plugin.js 的内容
const modifiedContent = content
.toString()
.replace(/CUSTOM_VALUE/g, i.key);
return modifiedContent;
},
});
// 复制public文件夹下面的loading文件夹到各自页面文件下
arr[0].push({
from: "public/loading",
to: i.dir + "/loading",
});
}
// 复制public文件夹下面的favicon.ico到dist/favicon.ico
arr[0].push({
from: "public/favicon.ico",
to: "favicon.ico",
});
return arr;
});
},
pages: {
// 大屏控制版本适配10560
ddScreenControl: {
entry: "src/main.js",
template: "public/index.html",
filename: "ddScreenControl/index.html",
},
// 大屏控制版本
ddScreenControl9800: {
entry: "src/main.js",
template: "public/index.html",
filename: "ddScreenControl9800/index.html",
},
},
};