需求:每个项目都只有一个页面,不可能每个页面都配一套脚手架
开始,冲冲冲!!!
项目目录文件: page1、page2、page3都是独立不相干的,需要独立编译
各文件配置
package.json
"scripts": {
"serve-page1": "vue-cli-service serve --mode page1",
"build-page1": "vue-cli-service build --mode page1",
"serve-page2": "vue-cli-service serve --mode page2",
"build-page2": "vue-cli-service build --mode page2"
},
.env.page1
NODE_ENV = 'development'
page = 'page1'
.env.page2
NODE_ENV = 'development'
page = 'page2'
vue.config.js
// 时间戳
const Timestamp = new Date().getTime();
// getPages方法生成pages对象:指定需要打包的页面
function getPages(pageName) {
let map = {};
// 单页面
map[pageName] = {
entry: "src/pages/"+pageName+"/main.js",
template: "public/index.html",
filename: "index.html"
}
return map
}
const pages = getPages(process.env.page);
module.exports = {
configureWebpack: {
mode: 'production',// 打包时模式就要切换成生产模式
},
publicPath: "./",
pages: pages,
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `js/[name].${Timestamp}.js`,
chunkFilename: `js/[name].${Timestamp}.js`
},
},
}
这样就ok啦,大佬们有更好的方法可以分享一下,特别是随着页面增多就要创建很多.env 文件