vue如何根据不同的环境使用不同的接口地址
vue根据不同的环境使用不同的接口地址
package.json文件,添加。
"dev:test": "vue-cli-service serve --mode test", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode prod",
代表npm命令行新增了几条命令,这里的test和prod是自己命名的你也可以写别的。
只要下面获取的时候根据这些名字匹配使用本地测试还是线上环境就行。
mpm run dev:test
运行本地环境mpm run build:test
用测试接口打包mpm run build:prod
用线上接口打包
然后我们可以根据process.env.NODE_ENV这个变量获取到输入的命令行的:后面的内容
我们新建一个config.js的文件存储接口地址和appid等全局需要使用的一些变量。
let HOST = process.env.NODE_ENV|| 'prod'; let baseURL = ""; let appid = ""; if(HOST === 'prod'){ //正式服 baseURL = "https://api.heebu.cn"; appid = 'wx90ad292c1eb1105c'; }else if(HOST === 'test'){ // 测试 baseURL = "https://testapi.heebu.cn"; appid = 'wx9b070f1675720f2b'; }else{ // 本地 baseURL = HOST; appid = 'wx9b070f1675720f2b'; } export { baseURL, appid }
其他页面可以引用这个config.js
import { baseURL,appid} from 'config.js'
然后就可以使用这个baseURL啦。
vue不同环境,请求不同环境的接口
开发过程中,根据项目要求,后台部署了三个环境的接口,分别是:开发环境(开发时请求)、测试环境(部署测试环境请求)、生产环境(部署到线上环境请求),我们分别把他们称之为:开发环境(development)、测试环境(test)、生产环境(production)。
.env文件
注意:请仔细阅读下方文字!!!
.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入,但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
创建.env文件
在项目根目录创建以下文件
这三个文件分别代表:开发、测试、生产,运行的.env文件
.env.development内容:
VUE_APP_BASE_URL = 'http://development'
.env.test内容:
VUE_APP_BASE_URL = 'http://test'
.env.production内容:
VUE_APP_BASE_URL = 'http://production'
修改启动命令,加载不同的.env文件
打开package.json文件
在scripts下进行修改
绿框位置代表:当前命令加载的.env文件
//例: npm run serve //执行此命令 则运行 .env.development文件 npm run test//执行此命令 则运行 .env.test文件 npm run production//执行此命令 则运行 .env.production文件
获取环境变量
可以js文件中通过
console.log(process.env.VUE_APP_BASE_URL) //开发环境打印 http://development //测试环境打印 http://test //生产环境打印 http://production
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue+element-plus上传图片及回显问题及数量限制
本文主要介绍了vue+element-plus上传图片及回显问题及数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-04-04vue3.0使用mapState,mapGetters和mapActions的方式
这篇文章主要介绍了vue3.0使用mapState,mapGetters和mapActions的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-06-06谈一谈vue请求数据放在created好还是mounted里好
这篇文章主要介绍了谈一谈vue请求数据放在created好还是mounted里好的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07element带输入建议el-autocomplete的使用
本文主要介绍了element带输入建议el-autocomplete的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-03-03
最新评论