1.应用场景
如果你的项目对稳定性要求比较高，希望版本发布的时候能够最小化影响，那么就可以使用多模块的方式进行打包。多模块打包的方式也是存在一些不足的，因此项目组要先了解多页面和单页面应用的优劣，再决定采用哪种方式。
2.vue cli 支持
vue cli本身就有支持页面的配置，关注module.export里面的pages参数配置。
# vue.config.js
const MODULE_LIST = ["hello","world"]; // 每个新增的模块名都需要在这里添加
const isDevelopment = process.env.NODE_ENV === "development"; // 开发环境
// 单模块编译,本地调试时输入npm run serve --module=模块名，其中npm_config_xxx是跟输入的npm run serve --xxx相对应的
const moduleName = process.env.npm_config_module;
function getPages(moduleName) {
if (isDevelopment && moduleName) {
// 开发环境按传入的模块名打包（1个）
return {
index: {
entry: `src/modules/${moduleName}/main.js`, // // page 的入口
// template: 'public/index.html', // 模板来源
// filename: 'index.html', // 在 dist/index.html 的输出
title: `模块-${moduleName}`,
},
};
} else {
// 生产环境全部打包
const modules = moduleName ? [moduleName] : MODULE_LIST;
const pages = {};
modules.forEach((item) => {
pages[item] = {
entry: `src/modules/${item}/main.js`,
};
});
return pages;
}
}
module.exports = {
outputDir: "dist", //build输出目录
assetsDir: "assets", //静态资源目录（js, css, img）
lintOnSave: false, //是否开启eslint
pages: getPages(moduleName),
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: "8080",
https: false, //是否使用https协议
hotOnly: false, //是否开启热更新
proxy: {
"/api": {
target:
"https://www.jianshu.com/writer#/notebooks/52257148/notes/99281154/preview", //API服务器的地址
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: {
//重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
"^/api": "",
},
},
},
},
};
3.目录结构调整
src目录下面新增modules目录，新增hello和world两个模块，每个模块包含的内容如下：
- mock目录，定义模块下的后台数据模拟返回数据
- router目录，定义模块的路由信息
- view目录，存放模块的页面
- App.vue
- main.js
其结构如下：
image.png
4.多页面问题
目前发现的问题是使用vue-router进行页面跳转失败，搜索了下，应该使用window.location.href进行页面跳转。
多页面与单页面比对
5.参考资料与代码下载
https://gitee.com/animal-fox_admin/learn-vue-web
branch：lesson3
