vue 分模块运行、分模块打包

最新推荐文章于 2023-09-05 23:25:35 发布

_freely

最新推荐文章于 2023-09-05 23:25:35 发布

阅读量2k

点赞数

分类专栏： webpack vue ES6 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hbjiankely/article/details/125960171

版权

vue 同时被 3 个专栏收录

33 篇文章 1 订阅

订阅专栏

ES6

6 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

分模块打包目的

每个模块可以单独运行及打包部署
项目也可以整体打包

子项目配置

在src目录下新建子项目名称,目录结构如下

recordSearchModule
  asset
  common
  components
  router
  store
  views
    页面
    login.vue 根据子项目情况可以共用项目的login页面
  App.vue
  main.js

在config/project.config.js中添加子项目运行及打包配置项

  recordSearchModule: {
    pages: {
      index: {
        entry: "src/recordSearchModule/main.js",
        template: "public/index.html",
        filename: "index.html"
      }
    },
  }

package.json配置子项目运行及打包命令

  // VUE_APP_PROJECT_NAME名称与config/project.config.js中的模块名称需保持一致
  "serve": "vue-cli-service serve",
  "serve:record": "cross-env VUE_APP_PROJECT_NAME=recordSearchModule vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:customer": "cross-env VUE_APP_PROJECT_NAME=customerCheckModule vue-cli-service build",

vue.config.js中配置子项目路径别名及添加子项目运行配置

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
// 获取cross-env 配置的子项目运行命令
let projectName = process.env.VUE_APP_PROJECT_NAME;
const project = config[projectName] || {};
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      .set("recordPage", resolve("./src/recordSearchModule"))
      .set("customerCheckPage", resolve("./src/customerCheckModule"))
  },
  ...project
}

配置子项目路由文件

// 抽离页面路由
const recordRoutes = [
    {
      path: '/taskRecord',
      component: (resolve) =>
        require([
          'recordPage/views/recordSearch/recordSearchList/taskRecord'
        ], resolve),
    }
]
// @是src的别名
// 子项目这里可以复用项目的页面,也可以使用子项目的页面
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      // component: login
      component: (resolve) => require(['@/views/login'], resolve),
      name: 'Login'
    },
    {
      path: '*',
      name: '404',
      hidden: true,
      component: (resolve) => require(['@/views/404'], resolve)
    },
    {
      path: '/nav',
      component: (resolve) => require(['recordPage/views/nav'], resolve),
      name: 'Index',
      children: recordRoutes
    },
  ]
});

main.js将process.env.VUE_APP_PROJECT_NAME挂载到Vue实例

/*
  在Vue文件中通过 this.$projectName获取
*/
const projectName = process.env.VUE_APP_PROJECT_NAME;
Object.assign(Vue.prototype, {
  $projectName: projectName
})