iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uni-app多环境配置实现自动部署的方式详解
  • 303
分享到

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

2024-04-02 19:04:59 303人浏览 安东尼
摘要

目录前言一、uni-app 不同打包方式下的环境配置1.HBuilderX 方式2.基于 Vue-cli 命令行方式二、配置多环境实现自动部署总结前言 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多环境配置自动部署内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uni-app多环境配置实现自动部署的方式详解

本文链接: https://www.lsjlt.com/news/150366.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作