本篇文章讲解如何进行多入口打包以及多环境打包.
1.多入口打包
假设我们的项目,分为手机端商城和pc端后台管理,手机上是用户访问,pc上是自己的后台管理,
后台管理使用elementUI框架,H5不使用任何框架.打包的时候,pc和h5分开打包.本机运行的时候pc和h5也是分开的
2.多环境打包
一个项目想要正式上线,首先需要本地开发没问题后,发到测试线上给测试人员测试,测完没问题再发到预发布环境(类似正式环境)上,最后没问题了才发到正式线,这个过程中每个环境连的接口地址都不一样,这是肯定不能每打包一次,就手动改下打包地址,
此时我们需要更改几行代码,执行不同的命令,只懂打包到对应的环境下.
有两种实现方法:
1.首先看下不使用vue自带的.env,通过命令来控制
首先是多入口打包
1.新建一个项目,删掉src原有的目录
2.新建pc-project和h5-project文件夹,这俩文件一个用来放pc的工程,一个用来放h5的工程
3.新建public文件夹(原先的public文件夹在src外面,cli打包的时候默认会将此文件夹下的所有文件都打包,所以需要自己新建一个),
public下新建两个index.html和h5.html
如图
:
4.package.json添加如下命令
"scripts": {
...
"serve-index": "vue-cli-service serve --mode index --port 9011",
"serve-h5": "vue-cli-service serve --mode h5 --port 9012",
"build-index": "vue-cli-service build index ",
"build-h5": "vue-cli-service build h5"
}
在根目录下(和package.json平级),新建vue.config.js文件
然后添加如下代码
// 本地运行vue-cli-service serve --mode index --port 9011 的时候 ServerSign = 'index ';
const ServerSign = process.argv[4] || 'index';
// 打包时候 运行vue-cli-service build h5 BuildSign = 'h5';
// 打印process.argv可以看到,node运行的命令所带的参数.
const BuildSign = process.argv[3] || 'index';
// 根据入口来设置pages
function setPage() {
const pages = new Map([
['h5',{
h5: {
entry: "src/h5-project/main.ts",
template: "src/public/h5.html",
filename: "index.html",
title: "vue-h5",
chunks: ["chunk-vendors", "chunk-common", "h5"]
}
}],
['index', {
index: {
entry: "src/pc-project/main.ts",
template: "src/public/index.html",
filename: "index.html",
title: "vue-pc",
chunks: ["chunk-vendors", "chunk-common", "index"]
}
}],
])
let page = {}; // 如果是PC首页则是index:{...},如果是h5首页,则是h5:{...}
if (process.env.NODE_ENV == 'development') {
// 开发环境下,运行不同的命令,打开不同的项目首页
page = pages.get(ServerSign) || pages.get('index');
} else {
// 生产环境下
page = pages.get(BuildSign) || pages.get(index);
}
return page;
}
module.exports = {
lintOnSave: false,
publicPath: "./",
outputDir:`dist/${BuildSign}` ,
pages: setPage(),
filenameHashing: true
};最后运行命令npm run serve-index,就可以访问pc系统首页
运行npm run serve-h5,就可以访问h5商城首页
运行npm run build-index 就可以将pc-project系统打包到dist/index文件夹下
运行npm run build-h5 就可以将h5-project系统打包到dist/h5文件夹下
打包结果:
运行结果:
多环境配置打包
在vue-cli3中,只提供development /production /test这三种环境变量,使用--mode changeEnv
假设我们除了开发环境,还有4个环境,
Debug(测试环境) | PublishTest01(模拟正式环境1) | PublishTest02(模拟正式环境2) | Release(正式环境) ,
vue,vue-cli3提供的就很难满足我们所需要.
在文档中,我们能看到 vue-cli3提供了.env来配置全局变量,规则是
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,
我在项目中试了下,直接给process.env添加以VUE_APP_开头的变量,完全是可以再静态客户点使用的.
在package中我们先把打包命令设置好
"scripts": {
...
"build-index": "vue-cli-service build index",
"build-h5": "vue-cli-service build h5",
"Release-index": "npm run build-index release", // 将index项目打包到Release环境目录下
"Debug-index": "npm run build-index debug",
"PublishTest01-index": "npm run build-index test1",
"PublishTest02-index": "npm run build-index test2",
"Release-h5": "npm run build-h5 release", // 将h5项目打包到Release环境目录下
"Debug-h5": "npm run build-h5 debug",
"PublishTest01-h5": "npm run build-h5 test1",
"PublishTest02-h5": "npm run build-h5 test2",
...
},然后在vue.config.js中新增一个比变量标记,用来识别,当前打包的环境是哪个(BuildNODE_ENV)
...
const BuildSign = process.argv[3] || 'index';
// 打包时候的环境变量标记 npm run Release-index BuildNODE_ENV = Release;
const BuildNODE_ENV = process.argv[4] || 'debug'; // process.argv[4];
// 设置打包的出口地址
function setOutputDir() {
const arr = new Map([
['index_debug', 'PublishTarget/Debug/pc'],
['index_test1', 'PublishTarget/PublishTest01/pc'],
['index_test2', 'PublishTarget/PublishTest02/pc'],
['index_release', 'PublishTarget/Release/pc'],
['h5_debug', 'PublishTarget/Debug/h5'],
['h5_test1', 'PublishTarget/PublishTest01/h5'],
['h5_test2', 'PublishTarget/PublishTest02/h5'],
['h5_release', 'PublishTarget/Release/h5'],
])
var arg = BuildSign;
var NODE_ENV = BuildNODE_ENV;
// 打印process.argv可以看到,运行的命令所带的参数.
// npm run Debug-index NODE_ENV = Debug;
var outputDir = arr.get(arg+'_'+NODE_ENV) || 'PublishTarget/Debug';
return outputDir;
}
module.exports = {
...
publicPath: "./",
outputDir:process.env.NODE_ENV == 'development'?'PublishTarget/Debug':setOutputDir() ,
...
};
接下来根据环境变量排配置全局接口地址,
我们在src下新建个文件 utils/api.js,代码如下
const envMap = new Map([
['debug', { pc: 'http://www.debug-PC.com', h5: 'http://www.debug-h5.com' }],
['test1', { pc: 'http://www.test1-PC.com', h5: 'http://www.test1-h5.com' }],
['test2', { pc: 'http://www.test2-PC.com', h5: 'http://www.test2-h5.com' }],
['release', { pc: 'http://www.release-PC.com', h5: 'http://www.release-h5.com' }],
['development', { pc: 'http://www.dev-PC.com', h5: 'http://www.dev-h5.com' }],
]);
module.exports.api = function(env){
const ret = envMap.get(env) ||envMap.get('development');
process.env.VUE_APP_BASE_PC = ret.pc;
process.env.VUE_APP_BASE_H5 = ret.h5;
}然后再vue.config.js的BuildNODE_ENV 下面使用
var api = require("./src/utils/api.js").api;
...
const BuildNODE_ENV = process.argv[4] || 'debug'; // process.argv[4];
if(process.env.NODE_ENV == 'development'){
api('development');
}else{
api(BuildNODE_ENV);
}这样就大功告成了,
运行
npm run Release-index
npm run Debug-index
npm run PublishTest01-index
npm run PublishTest02-index
npm run Release-h5
npm run Debug-h5
npm run PublishTest01-h5
npm run PublishTest02-h5
结果
这样就可以就达到了不同的环境下,打包到不同的文件夹下,发版的时候,我们只需要上传到svn,然后将svn文件地址发给运维就行啦
2.使用vue自带的.env
我们来改造上面的项目以及代码
首先在根目录添加下面几个文件,分别设置全局变量,例如.env.debug文件 (VUE_APP_前缀开头才能被vue识别)
注意,正式线打包的话一定要使用 NODE_ENV = production 否则打包下来的代码不会压缩哦
package.json命令换成下面的:
vue.config.js里面,通过process.argv来获取参数,根据不同的参数,来打包不同的界面,同上面的差不多.
此时运行命令npm run Debug:pc,就可以打包下来啦,浏览器运行下Debug包试试看:
可以看到,设置的全局变量就生效啦!
