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

原创已于 2022-11-15 17:17:26 修改 · 2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-11-15 15:50:16 首次发布

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了在前端开发中如何管理和使用环境变量，包括开发、测试和生产环境的不同配置，以及如何创建和使用.env文件进行环境切换。通过设置VUE_APP_开头的变量，可以在不同环境中读取相应的配置，如API域名，实现动态切换。同时，讲解了如何在Vue项目中根据process.env.NODE_ENV判断当前环境，并展示了在axios中根据环境配置基础URL的例子。

一、说明及使用

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 //基础路径，一般是访问域名；后续访问地址就不需要写前缀域名了
});