根据process.env.NODE_ENV配置本地/测试/生产环境的接口请求地址

·  阅读 1040

概述

在我们开放当中,分为本地,测试,和线上三种环境,因此我们需要根据不同的环境配置项目接口请求地址,我们可以根据node提供的全局对象process.env

用法(vue cli搭建的项目)

借助命令--mode 环境(development test production)

//package.json中更改脚本命令
     "serve:dev": "vue-cli-service serve",//默认为开发环境develoment
    "serve:pro": "vue-cli-service serve --mode production", //修改process.env.NODE_ENV=production
    "build:test": "vue-cli-service build --mode development",//修改process.env.NODE_ENV=development
    "build:pro": "vue-cli-service build",//打包默认process.env.NODE_ENV=development
    "test:unit": "vue-cli-service test:unit",//修改默认打包的process.env.NODE_ENV=production
    "start": "http-server dist"
复制代码

axios配置文件当中

import axios from "axios";
axios.baseUru=process.env.NODE_ENV=="development" ? "baseurl测试地址" : "baseurl线上环境"

复制代码

更多配置(环境变量)

实际工程化项目当中,难免会有很多开发环境和线上正式环境要用到的配置变量,比如上面提到的接口请求地址,如果你用到了微信的三方授权登陆,还有appid,还比如后台系统,我们有上传文件的导入模板下载地址等等,只要你想在不同环境下,设置不同的变量,就可以根据不同的node环境进行配置 下面是vuecli脚手架所述:

image.png 看完后你可能没懂 我用自己的话解释就是根据我们package.json脚本命令--mode后面的环境变量,创建不同的.env[环境]文件,这些文件就可以根据--mode 环境,注入到process.env当中,其中.env不管什么环境都会注入,直接新建下面三个文件在你脚手架根目录:

image.png

对应文件内容

image.png

image.png

package脚本依然是上面的没变:

image.png

运行npm run serve:dev

在app组件访问我们定义的变量(可以看到测试环境可以访问了) image.png image.png

运行npm run serve:pro(可以看到生产环境可以访问了)

image.png

注意(踩坑经验)

我们直接这种变量的形式在运行之后是无法访问到的,要想要项目中能访问到环境变量,一定要以 VUE_APP_开头定义,否则无法访问到,我刚开始还纳闷,后来才懂官方的说法,所有这是个经验 image.png 接下来就可以根据你自己的需求进行项目配置了。

总结:

文档有时候可能会说的云里雾里,需要我们多实践 对你有帮助记得点赞哦,不定期更新工作中的经验

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改