vue打包模块化配置

---

同一个项目给不同的环境配置打包命令

有时候项目中可能会遇到,某一些模块,这个项目需要,某一些模块另外一个项目需要,今天记录几个自己平常项目中比较常用的办法

假设现在有一个项目,A城市有一个单独的模块,B城市也有一个单独的模块,同时他们还有两个共同的页面,我们需要怎么区分呢

先看看最后有哪些文件

添加文件模块

首先在views下创建四个文件夹 cityA,cityB,pageA,pageB分别代表了刚刚描述的模块

每个文件夹下新增 index.js, index.vue

<!-- index.js中的代码就是类似这样的,路径什么的都可以自己定义 -->
export const routes = [
  {
    path: "/city/a",
    name: "cityA",
    component: () => import(/* webpackChunkName: "cityA" */ "./index.vue"),
    meta: {
      title: "定制化A页面",
    },
  },
];

<!-- index.vue中的代码就是类似这样的,具体是自己的页面-->
<template>
  <div>我是A城市的定制化页面</div>
</template>
<script></script>
<style scoped></style>

之所以每个文件对应一个index.js的路由,也是一个拆分模块的方法,这里只是提供一个思路,按照项目实际开发的来就好

之所以这样,是为了解耦,解耦后就可以根据功能模块组合出各种功能不一的系统

添加配置项

在src下新增一个 config 文件夹, 添加三个文件 cityA.js,cityB.js,index.js

import { routes as pageA } from "../views/pageA/index.js";
import { routes as pageB } from "../views/pageB/index.js";
import { routes as cityA } from "../views/cityA/index.js";

export const routes = [...pageA, ...pageB, ...cityA];
export const pageTitle = "城市A的标题";
export const logoUrl = "城市A的logo";

import { routes as pageA } from "../views/pageA/index.js";
import { routes as pageB } from "../views/pageB/index.js";
import { routes as cityA } from "../views/cityA/index.js";

export const routes = [...pageA, ...pageB, ...cityA];
export const pageTitle = "城市A的标题";
export const logoUrl = "城市A的logo";

import { routes as pageA } from "../views/pageA/index.js";
import { routes as pageB } from "../views/pageB/index.js";
import { routes as cityA } from "../views/cityA/index.js";

export const routes = [...pageA, ...pageB, ...cityA];
export const pageTitle = "城市A的标题";
export const logoUrl = "城市A的logo";

export * from './cityA';

这个文件夹的目的,是为了让路由表统一拉取到对应的配置

路由配置

这里路由把config中的index.js的配置导入后,在对应的路由表中直接渲染

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import { routes, pageTitle } from "../config";

Vue.use(VueRouter);

const routesList = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  ...routes,
];

const router = new VueRouter({
  routes: routesList,
});

router.beforeEach(async (to, from, next) => {
  document.title = `${to.meta.title || ""}${pageTitle || ""}`;
  next();
});

export default router;

修改配置文件

在根目录下新增一个script文件,新增server.js文件和build.js

各个语句的说明直接写在代码里面

// shelljs是用来执行命令的
const shell = require('shelljs');
// inquirer是用来写交互式命令行的
const inquirer = require('inquirer');
// chalk是用来装扮命令行命令的（比如在命令行输入个红色的字）
const chalk = require('chalk');
// node自带的fs文件模块
const fs = require('fs');

const writeFile = (path, content) => {
  return new Promise((reslove, reject) => {
    fs.writeFile(path,
      content,'utf8', () => {
      reslove(true);
    });
  })
}
const release = new Map([
  ['cityA定制版', "export * from './cityA';"],
  ['city定制版', "export * from './cityB';"],
])
const env = new Map([
  ['生产环境', "NODE_ENV = production"],
  ['测试环境', "NODE_ENV = testing"],
])

const build = async () => {
  const res = await inquirer.prompt([
    {
      type: 'list',
      name: 'release',
      message: '请选择你要运行的版本？',
      choices: ['cityA定制版', 'cityB定制版']
    },
    {
      type: 'list',
      name: 'env',
      message: '请选择你要运行的环境？',
      choices: ['生产环境', '测试环境']
    },
  ]);
  await Promise.all([writeFile(`${process.cwd()}/src/config/index.js`, release.get(res.release)),writeFile(`${process.cwd()}/.env`, env.get(res.env))]);
  console.log(chalk.green(`您要运行的是${res.env}---${res.release},正在为您运行......`));
  shell.exec('vue-cli-service serve');
}
build();

build.js的文件一样,只是最后运行的时候 是 ‘vue-cli-service build’

这边相当于把你选择的配置项,修改在 config/index.js 和 .env中,从而达到不同项目引入不同模块的目的

运行文件

package.json 文件需要修改一下运行配置

"serve": "vue-cli-service serve",
"dev": "node script/server.js",
"build": "node script/build.js",

这样dev启动的时候默认走的就是我们server.js

这只是其中一种的思路,按照文件夹的形式进行模块化的区分,如果嫌弃麻烦,也可以把配置都写在一个js里面,导出这个js在vue的原型链里面,在代码里去做判断,都是可以的

以上就是我对模块化打包的理解，如有错误，欢迎大佬指出