我想像vue那样配置多环境变量
开发环境、测试环境、生产环境
最近我也在配置uni-app的多环境,在官方社区找到了解决方法
参考一下社区的解决方案:https://ask.dcloud.net.cn/que...
在根目录下创建.env.js,.env.dev.js,.env.prod.js这三个文件。
.env.js
;
(function() {
const NODE_ENV = 'dev'; // dev:开发环境 | test:测试环境
let ENV_VAR = null;
if (process.env.NODE_ENV === "development") {
if (NODE_ENV === 'dev') {
ENV_VAR = require('.env.dev.js');
} else if (NODE_ENV === 'test') {
}
} else if (process.env.NODE_ENV === "production") {
ENV_VAR = require('.env.prod.js');
}
if (ENV_VAR) {
process.uniEnv = {};
for (let key in ENV_VAR) {
process.uniEnv[key] = ENV_VAR[key];
}
}
})();
.env.dev.js
const UNI_APP = {
BASE_API: '/dev-api'
}
module.exports = UNI_APP;
.env.prod.js
const UNI_APP = {
BASE_API = '/prod-api'
}
module.exports = UNI_APP;
.env.js 起到一个总控的作用,根据NODE_ENV变量的值加载不同的文件,起到环境变量切换的效果。有一点需要注意的是,我们需使用process.uniEnv.xxx来获取我们设置的全局变量值。
在App.vue 引入.env.js并设置globalData
import '.env.js'
export default {
globalData: process.uniEnv
};
我说说我的办法
因为公司的发布工具用的Octopus
要方便一套编译的代码到不同环境运行,需要有一个静态的config.json
保存服务器配置
而uni-app
似乎没有一种很好的静态配置文件(应该是npm问题,因为所有代码都会被编译,或者我才疏学浅不知道怎么单独将配置文件引用到uni-app
中)
这就需要配置文件从json中读取
因此先将配置文件config.json
放到静态输出目录static
下
然后在程序启动后读取配置文件,我的配置文件读取放到的index.html
里面的
<script>
const configUrl="./static/config.json";
if(typeof window.Config=="undefined")
fetch(configUrl).then(c => {
c.json().then(t => {
window.Config = t;
});
});
</script>
在需要配置的时候从Config
中读取就行了
这样写本地调试OK,发布后总是遇到Config is undefined
的问题,因此我在读取配置之前等3S
function delay(milliseconds) {
return new Promise(resolve => {
console.log('start delay',milliseconds);
setTimeout(resolve, milliseconds);
});
}
//读Config之前等待
{
if (typeof Config == 'undefined'){
console.log('config is null try delay 3000');
await delay(3000);
console.log('delay end');
}
else{
console.log('config is not null ,no need delay');
}
}
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
找了半天,发现都不靠谱包括上面的回答,自己研究了下,因为也用了vue cli所以直接后面加 --mode [env], 还是vue怎么写就怎么写,最简单,亲测好用

