最近用uniapp开发项目,作为一个后端还是遇到了不少坑,在此记录一下。开发环境,测试环境,发布环境不同环境下部署的参数和接口都是不一样,这是一个很基础的需求。uniapp的文档写的有点乱,很容易一头雾水,其实并不难就是要分清uniapp的HBuilderX和vue工程下的区别。这里不多赘述,简单来说就是:

用HBuilderX构建的工程,就别用VUE文档的方法,除非你将其转换成VUE工程
用HBuilderX构建的工程,就别用VUE文档的方法,除非你将其转换成VUE工程
用HBuilderX构建的工程,就别用VUE文档的方法,除非你将其转换成VUE工程

下面直接贴下HBuilderX解决方案:
1、如下图,新建三个JS文件:env.js,env.development.js,env.production.js

2、env.js代码如下:

let envConfig = null;
if(process.env.NODE_ENV === 'production'){
	envConfig = require('./env.production.js');
}else{
	envConfig = require('./env.development.js');
}
//自定义一个uniEnv的全局变量,把配置导入到全局变量
process.uniEnv = {};
for (let key in envConfig) {
	process.uniEnv[key] = envConfig[key];
}

3、env.development.js代码如下,内容可以自定义:

const ENV = {
    baseUrl : 'http://development.com/', //写上你的地址
	secret  : 'development'  //写上你的密钥
	//还可以增加其他的,自己的需求
}
module.exports = ENV;

4、在你的main.js中导入env.js

import './pages/common/env.js'

5、然后在你要用的地方用就行了。
在这里插入图片描述
其实很简单,就是不要搞混了。建议是用VUE工程 ,上述方法在实际生产中,定义的接口密钥的或者其他私密信息最后也都是明文,是极其不安全的。

Logo

前往低代码交流专区

更多推荐