同一个项目给不同的环境配置打包命令
有时候项目中可能会遇到,某一些模块,这个项目需要,某一些模块另外一个项目需要,今天记录几个自己平常项目中比较常用的办法
假设现在有一个项目,A城市有一个单独的模块,B城市也有一个单独的模块,同时他们还有两个共同的页面,我们需要怎么区分呢
先看看最后有哪些文件
添加文件模块 首先在views下创建四个文件夹 cityA,cityB,pageA,pageB分别代表了刚刚描述的模块
每个文件夹下新增 index.js
, index.vue
1 2 3 4 5 6 7 8 9 10 11 12 <!-- index.js中的代码就是类似这样的,路径什么的都可以自己定义 --> export const routes = [ { path: "/city/a", name: "cityA", component: () => import(/* webpackChunkName: "cityA" */ "./index.vue"), meta: { title: "定制化A页面", }, }, ];
1 2 3 4 5 6 <!-- index.vue中的代码就是类似这样的,具体是自己的页面--> <template> <div>我是A城市的定制化页面</div> </template> <script></script> <style scoped></style>
之所以每个文件对应一个index.js的路由,也是一个拆分模块的方法,这里只是提供一个思路,按照项目实际开发的来就好
之所以这样,是为了解耦,解耦后就可以根据功能模块组合出各种功能不一的系统
添加配置项 在src下新增一个 config 文件夹, 添加三个文件 cityA.js
,cityB.js
,index.js
1 2 3 4 5 6 7 8 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";
1 2 3 4 5 6 7 8 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";
1 2 3 4 5 6 7 8 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";
1 export * from './cityA';
这个文件夹的目的,是为了让路由表统一拉取到对应的配置
路由配置 这里路由把config中的index.js的配置导入后,在对应的路由表中直接渲染
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 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
各个语句的说明直接写在代码里面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 // 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 文件需要修改一下运行配置
1 2 3 "serve": "vue-cli-service serve", "dev": "node script/server.js", "build": "node script/build.js",
这样dev启动的时候默认走的就是我们server.js
这只是其中一种的思路,按照文件夹的形式进行模块化的区分,如果嫌弃麻烦,也可以把配置都写在一个js里面,导出这个js在vue的原型链里面,在代码里去做判断,都是可以的
以上就是我对模块化打包的理解,如有错误,欢迎大佬指出