uni-app的多环境部署配置-阿里云开发者社区

开发者社区> 数据库> 正文
登录阅读全文

uni-app的多环境部署配置

简介: 分享下如何对uni-app项目进行多环境打包部署改造

本文记录的方法适用于vue-cli方式创建的 uni-app 项目。

环境区分

官方文档说明:
开发环境和生产环境
uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境

解决方案

  1. 使用基于vue-cli命令行方式创建项目
  2. 添加必要的环境变量, VUE_APP_ 起始,例如 VUE_APP_BASE_API
    即在项目根目录新建不同环境的变量配置文件,并分别写入环境所需配置

    • .env.development
    • .env.test
    • .env.production
  3. 然后可以通过 VUE_APP_BASE_API 访问
    例如:在项目内请求接口的地方设置 baseurl 为 process.env.VUE_APP_BASE_API
  4. 修改 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",
  1. 最后像普通vue项目一样使用就行了
npm run dev:h5-test

参考资料

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
数据库
使用钉钉扫一扫加入圈子
+ 订阅

分享数据库前沿,解构实战干货,推动数据库技术变革

其他文章
最新文章
相关文章