uni-app的多环境部署配置

记录下如何对uni-app项目进行多环境打包部署改造

环境区分

官方文档说明：

开发环境和生产环境

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境

解决方案

使用基于vue-cli命令行方式创建项目(可选择将旧项目改造为支持命令行的方式)

添加必要的环境变量， VUE_APP_ 起始，例如 VUE_APP_BASE_API

即在项目根目录新建不同环境的变量配置文件，并分别写入环境所需配置

.env.development

.env.test

.env.production

然后可以通过 VUE_APP_BASE_API 访问

例如：在项目内请求接口的地方设置 baseurl 为 process.env.VUE_APP_BASE_API

修改 package.json

增加以下脚本，在启动或者打包时以切换不同服务器(不一定完全按照下方设置)。

这里的需求是在开发模式启动时方便切换开发、测试、生产环境的数据库方便验证问题，以及发行至各环境

"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build", "build:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-build", "build:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build", "dev:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-serve --watch", "dev:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-serve --watch", "dev:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --watch",

最后像普通vue项目一样使用就行了

npm run dev:h5-test

参考资料

uni-app如何多环境配置部署，使用npm的方式(https://ask.dcloud.net.cn/question/73096)

开发环境和生产环境(https://uniapp.dcloud.io/frame?id=%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%92%8C%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83)

命令行打包(http://xuedingmiao.com/blog/jnpf_app_cli.html)

移动APP

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。