本文详细介绍在uniapp微信小程序开发中如何配置多环境（开发、测试、生产）。针对Vue2版本，通过package.json定义环境变量；针对Vue3 Vite版本，需结合envConfig.js与vite.config.js进行改造，确保process.env正确获取不同环境下的API地址与配置信息。
在前后端分离的开发模式下，无论是前端还是后端，通常都需要区分不同的运行环境，例如开发环境（dev）、测试环境（test）以及线上生产环境（prod）。各环境的配置参数存在差异，尤其是后端请求的API地址各不相同。那么，在微信小程序开发中应如何设置多环境配置呢？
定义其他的环境变量
在之前的Vue项目实践中，可以通过.env文件来配置开发、测试和线上所需的环境变量。
而在uniapp框架中，默认仅支持development和production这两种条件判断。
在Vue2版本中，可以通过process.env.NODE_ENV来获取当前环境状态。
如果我们需要额外的变量，例如测试环境（test），该如何处理呢？
通过查看官网示例，我们可以找到相关的配置方法。
在根目录下的package.json文件中操作，如果该文件不存在，可以通过npm init -y命令初始化并创建一个。
{
"uni-app": {
"scripts": {
"dev": {
"title": "微信小程序——开发版",
"env": {
"ENV_TYPE": "dev",
"UNI_PLATFORM": "mp-weixin",
"VUE_APP_BASE_URL": "http://127.0.0.1:8080/"
}
},
"test": {
"title": "微信小程序——测试版",
"env": {
"ENV_TYPE": "test",
"UNI_PLATFORM": "mp-weixin",
"VUE_APP_BASE_URL": "http://test.domain/"
}
},
"pro": {
"title": "微信小程序——正式版",
"env": {
"ENV_TYPE": "pro",
"UNI_PLATFORM": "mp-weixin",
"VUE_APP_BASE_URL": "http://pro.domain/"
}
}
}
},
"name": "xm-uni-app",
"version": "1.0.0",
"description": "{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"author": "",
"license": "ISC"
}保存配置后，在HBuilderX中会显示在运行/发行菜单中。
Vue2版本中使用
直接通过process.env打印时可能无法看到自定义变量。
直接通过process.env.变量名的方式即可使用。
console.log(process.env.VUE_APP_BASE_URL,'获取处于当前开发环境的url');
console.log(process.env.ENV_TYPE,'获取当前处于哪个开发环境');
console.log(process.env,'process.env++++++++++++');
Vue3 Vite版中使用
在Vue3环境中无法直接获取process，因此需要进行一些改造。
{
"uni-app": {
"scripts": {
"dev": {
"title": "微信小程序——开发版",
"env": {
"ENV_TYPE": "dev",
"UNI_PLATFORM": "mp-weixin",
"VITE_BASE_API": "http://127.0.0.1:8080/"
}
},
"test": {
"title": "微信小程序——测试版",
"env": {
"ENV_TYPE": "test",
"UNI_PLATFORM": "mp-weixin",
"VITE_BASE_API": "http://test.domain/"
}
},
"pro": {
"title": "微信小程序——正式版",
"env": {
"ENV_TYPE": "pro",
"UNI_PLATFORM": "mp-weixin",
"VITE_BASE_API": "http://pro.domain/"
}
}
}
}
}在src/utils文件夹下创建envConfig.js文件。
// 导出的环境请求地址
//本地环境
const dev = {
ENV: "dev",
VITE_BASE_API: "http://127.0.0.1:8080/dev-api",
};
//正式环境
const pro = {
ENV: "pro",
VITE_BASE_API: "https://xxx/prod-api",
};
//测试环境
const test = {
ENV: "test",
VITE_BASE_API: "https://xxx/test-api",
};
export default {
dev,
test,
pro,
};在vite.config.js中添加相应配置。
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import ENV_CONFIG from "./utils/envConfig.js";
import { resolve } from "path"; // 导入 path 模块，帮助我们解析路径
export default defineConfig(() => {
return {
server: {
port: "3002",
},
resolve: {
alias: {
"@": resolve(__dirname, "/src"),
},
},
plugins: [uni()],
define: {
"process.env.config": ENV_CONFIG, //配置一
'process.env': process.env, //配置二
},
};
});使用方式
let baseURL = process.env.config[process.env.UNI_SCRIPT].VITE_BASE_API; //获取处于当前开发环境的url
let evnName = process.env.config[process.env.UNI_SCRIPT].ENV; //获取当前处于哪个开发环境
console.log("baseURL:", baseURL, "++++++++++++++++++++++++");
console.log("envName:", evnName, "++++++++++++++++++++++++");
console.log("evn:", process.env, "++++++++++++++++++++++++");
总结
到此这篇关于uniapp微信小程序多环境配置以及使用的文章就介绍到这了,更多相关uniapp微信小程序多环境内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！