5. Vue 项目多模块打包

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进行页面跳转。
多页面与单页面比对

https://blog.51cto.com/liangchaoxi/4052445

5.参考资料与代码下载

https://juejin.cn/post/7022149642355736613

https://gitee.com/animal-fox_admin/learn-vue-web
branch：lesson3