uni-app多环境配置实现自动部署的方式详解

 更新时间:2022年06月01日 14:34:01   作者:奔跑吧邓邓子  
前后端分离开发模式中,无论前后端都有可能区分不同的环境配置,下面这篇文章主要给大家介绍了关于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多环境配置自动部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • JavaScript框架(iframe)操作总结

    JavaScript框架(iframe)操作总结

    这篇文章主要介绍了JavaScript框架(iframe)操作,介绍了种情况下的操作方法,需要的朋友可以参考下
    2014-04-04
  • countUp.js实现数字滚动效果

    countUp.js实现数字滚动效果

    这篇文章主要为大家详细介绍了countUp.js实现数字滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Swiper.js插件超简单实现轮播图

    Swiper.js插件超简单实现轮播图

    这篇文章主要介绍了Swiper.js插件超简单实现轮播图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JavaScript操作元素教你改变页面内容样式

    JavaScript操作元素教你改变页面内容样式

    这篇文章主要为大家介绍了JavaScript操作元素,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • QQ邮箱的一个文本编辑器代码

    QQ邮箱的一个文本编辑器代码

    QQ邮箱的一个文本编辑器代码...
    2007-03-03
  • JavaScript事件委托技术实例分析

    JavaScript事件委托技术实例分析

    这篇文章主要介绍了JavaScript事件委托技术,实例分析了事件委托技术的原理、适用场合及用法实例,需要的朋友可以参考下
    2015-02-02
  • Flexible.js可伸缩布局实现方法详解

    Flexible.js可伸缩布局实现方法详解

    这篇文章主要介绍了Flexible.js可伸缩布局实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • 百度小程序自定义通用toast组件

    百度小程序自定义通用toast组件

    这篇文章主要介绍了百度小程序自定义通用toast组件,百度小程序的toast仅支持在页中展示,不能自定义位置、字体大小、在单个文本中增加icon等需求;因此自定义一个全局可通用的Toast,需要的朋友可以参考下
    2019-07-07
  • 20170918 前端开发周报之JS前端开发必看

    20170918 前端开发周报之JS前端开发必看

    本文给大家分享了最新版js 前端开发周报,内容非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • JavaScript使用箭头函数实现优化代码

    JavaScript使用箭头函数实现优化代码

    在JavaScript的编程世界里,我们时常被普通函数的冗长写法所困扰,每次都需要写function关键字,有时候还要明确地写return语句,下面我们就来看看如何利用箭头函数优化这些繁琐的代码吧
    2023-11-11

最新评论