uni-app多环境配置实现自动部署的方式详解
前言
uni-app 项目在不同阶段需要部署到不同的环境，比如开发环境（dev）、测试环境（test）、UAT 环境（uat）、生产环境（prod）等，那么如何通过自动化构建工具实现在多环境下自动部署呢？我们先来看看不同打包方式下的环境配置。
一、uni-app 不同打包方式下的环境配置
uni-app 可通过 HBuilderX 方式和基于 vue-cli 命令行方式进行打包，两种方式下进行打包的开发环境和生产环境是不同的。
1.HBuilderX 方式
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
在HBuilderX 中，点击 “运行” 编译出来的代码是开发环境，点击 “发行” 编译出来的代码是生产环境。
2.基于 vue-cli 命令行方式
使用基于 vue-cli 命令行方式创建项目可通过添加必要的环境变量和判断实现多环境配置，然后在编译时带上环境参数即可。
二、配置多环境实现自动部署
由以上分析可知，我们需要通过基于 vue-cli 命令行方式来实现自动化部署。
1.编写 js 文件，对环境进行判断
// 开发环境
const dev = {
common: "http://192.168.xx.xx:2000",
store:"http://192.168.xx.xx:2001",
buyer: "http://192.168.xx.xx:2002"
};
// UAT环境
const uat = {
common: "http://124.xx.xx.xx:2000",
store:"http://124.xx.xx.xx:2001",
buyer: "http://124.xx.xx.xx:2002"
};
// 生产环境
const prod = {
common: "http://128.xx.xx.xx:2000",
store:"http://128.xx.xx.xx:2001",
buyer: "http://128.xx.xx.xx:2002"
};
//默认生产环境
let api = dev;
//如果是开发环境
if (process.env.NODE_ENV == "development") {
api = dev;
} else if (process.env.NODE_ENV == "uat") {
api = uat;
} else {
api = prod;
}
2.修改 package.json 文件
{
"name": "shop-uniapp",
"version": "1.0.0",
"description": "#####开源不易，如有帮助请点Star",
"main": "main.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:h5-dev": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=development node /usr/local/uniapp-cli/bin/uniapp-cli.js",
"build:h5-uat": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uat node /usr/local/uniapp-cli/bin/uniapp-cli.js",
"build:h5-prod": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=prod node /usr/local/uniapp-cli/bin/uniapp-cli.js"
},
"repository": {
"type": "git",
"url": "http://xxx/shop-uniapp.git"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3.打包
npm install cross-env -g && npm install && npm run build:h5-uat
总结
到此这篇关于uni-app多环境配置实现自动部署的文章就介绍到这了,更多相关uni-app多环境配置自动部署内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
