前端——Vue 环境变量配置.env

一、说明及使用

1.说明：

不同环境下，开发环境、测试环境、生产环境/上线环境，访问的服务器等等配置不同，可以在开发时进行统一配置后，不同环境下，自动读取配置好的参数。

2.在开发的时候一般会有是三个环境

   开发环境 测试环境 线上环境

   vue 中有个概念就是模式，默认先 vue cli 有三个模式

• development开发环境模式用于vue-cli-service serve

• production生产环境模式用于 vue-cli-service build 和 vue-cli-service test:e2e

• test测试环境模式用于vue-cli-service test:unit

3.但是往往开发的时候可能不止有三种：

• 本地环境（local）

• 开发环境（development）

• 测试环境（devtest）

• 预发布环境（beta）

• 生产环境（production）

4.创建不同环境变量文件

  在项目根目录下，配置环境文件：

  通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。

• 在项目根路径下设置 新建对应文件 .env.development（开发环境文件） .env.production（生产环境文件）.env.devtest（测试环境文件）

• 在每个文件写入如下内容(VUE_APP_随便写）

VUE_APP_XIAOMING = "开发模式"

• package.json 环境对应的执行语句

"scripts": {
  "serve": "vue-cli-service serve",//开发模式
  "build": "vue-cli-service build",//生产模式
  "dev_test_build": "vue-cli-service build --mode development_test",//测试模式
  "lint": "vue-cli-service lint"
},

• 使用变量process.env.你的内容即可得到

import { reactive, ref,onMounted} from "vue";
onMounted(()=>{
    console.log(process.env.VUE_APP_XIAOMING);
})

二、其他

1.获取当前的环境

process.env.NODE_ENV

2.获取.env配置文件中VUE_APP_API

process.env.VUE_APP_API

3.在配置了环境.env文件VUE_APP_API

一般是为了判断不同环境下，进行不同配置的读取；

(1)比如访问不同的服务器时，对应不同的域名，将域名存在.env中，根据运行环境进行读取；

请求访问的基础路径——域名；

使用axios创建实例时，可以配置基础路径baseURL：

/* 1.引入axios */
import axios from 'axios';

/* 2.创建axios实例的方式使用 */
//不同环境下,访问域名
let axiosUrl = "";
if (process.env.NODE_ENV === "development") {
    axiosUrl = process.env.VUE_APP_API;
} else {
    axiosUrl = process.env.VUE_APP_API;
}
//创建实例，配置基础路径
const service = axios.create({
    baseURL: axiosUrl //基础路径，一般是访问域名；后续访问地址就不需要写前缀域名了
});