uni-app如何配置多环境?

我想像vue那样配置多环境变量
开发环境、测试环境、生产环境

阅读 15.6k
3 个回答

找了半天,发现都不靠谱包括上面的回答,自己研究了下,因为也用了vue cli所以直接后面加 --mode [env], 还是vue怎么写就怎么写,最简单,亲测好用
image.png
image.png

最近我也在配置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');
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题