vue实现分环境打包步骤(超详细)
作者:张元 [email protected]
在项目目录下运行如下命令安装cross-env
npm i --save-dev cross-env
安装成功或原本项目就有可以查看node_modules目录有cross-env插件
以我的项目为例(dev【本地测试环境】、prod【服务器测试环境】、henan,jilin(河南和吉林生产环境,以下生产环境只讲河南,因为吉林一样))
在config/目录下添加henan.env.js、jilin.env.js(将prod.env.js复制改个名字然后下面改一改就是好了)。prod.env.js和dev.env.js不用修改
分别对henan.env.js和jilin.env.js文件内容进修修改,修改后的内容如下:【NODE_ENV、ENV_CONFIG 根据自己的分类自定义】(吉林和河南类似不做赘述)
'use strict'
module.exports = {
NODE_ENV: '"prod-henan"',
ENV_CONFIG:'"henan"',
BASE_API: '"https://api-henan"'
}
对package.json文件中的scripts内容进行个性,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。
{
"name": "vue-element-admin",
"version": "3.7.2",
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
"author": "Pan
"license": "MIT",
"scripts": {
"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build--jilin": "cross-env NODE_ENV=prod-jilin env_config=jilin node build/build.js",
"build--henan": "cross-env NODE_ENV=prod-henan env_config=henan node build/build.js",
"lint": "eslint --ext .js,.vue src",
"test": "npm run lint",
"precommit": "lint-staged"
},
如下图红色框内的参数一定要和XX.ENV.js文件的值对应否则不生效!
修改config/index.js文件中build参数,这里的参数会在build/webpackage.prod.conf.js中使用到
build: {
//zy 以下四行zy添加 为实现分环境打包
devEnv: require('./dev.env'),
prodEnv: require('./prod.env'),
jilinEnv: require('./jilin.env'),
henanEnv: require('./henan.env'),
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
如图红色框是自己添加代码
对build/webpackage.prod.conf.js文件进行修改,调整env常量的生成方式。
// zy修改 为实现 分环境打包
// const env = require('../config/'+process.env.env_config+'.env')
const env = config.build[process.env.env_config+'Env']
修改process.env.NODE_ENV的赋值,修改spinner的定义
// zy修改 为实现 分环境打包
// const spinner = ora('building for ' + process.env.env_config + ' environment...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
修改的文件:你原来写访问后台接口地址的文件!!因项目而异,,你原来访问地址的地方换成这个带环境判断的!
例如我的:
这是我配置url的文件,当然根据你项目的情况找到配置访问后台url的文件进行修改
/*
* 配置编译环境和线上环境之间的切换
*/
let url = '';
if (process.env.NODE_ENV == 'development') {
url = "http://192.168.1.113:9000";//运行dev环境
}if (process.env.NODE_ENV == 'production') {
url = "http://123. XX. XX. XX:9000"; //打包生产环境
}else if(process.env.NODE_ENV == 'prod-jilin'){
url = "http://136. XX. XX. XX:11000";//打包吉林生产环境
}else if(process.env.NODE_ENV == 'prod-henan'){
url = "http://137. XX. XX. XX:12017";//打包河南生产环境
}
……此处省略
const iamsURL = {
url,
…….
}
export default iamsURL
打包:
运行npm run build //服务器测试环境
运行npm run build—jilin //吉林生产环境
运行npm run build—henan //河南生产环境
注意:
运行命令的 build—jilin是第三步配置的,也可以配置为 build:jilin那么打包命令就是npm run build:jilin (要学会变通)
发布:
运行结束后项目出现dist目录
将dist拷贝到tomcat的webapps目录下 启动tomcat 访问 localhost:8080/dist测试项目连接是那个后台地址