vue项目中环境变量相关

1，简介

一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，基本路径，服务器代理这种都要更改一遍，这时候就显得很麻烦，所以这里就使用了环境变量。若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。

开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）
测试环境（测试阶段，上线前版本，除了一些 bug 的修复，基本不会和上线版本有很大差别）
生产环境（上线阶段，正式对外发布的版本，一般会进行优化，关掉错误报告）

2，使用

[1]创建.env文件

直接在根目录下创建.env后缀的文件
.env ——全局的，没有设置其他环境变量时，会加载这个文件里的内容，比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行
.env.development ——开发环境下的配置文件，会覆盖.env这个文件里定义的环境变量（比如执行npm run dev命令，会自动加载.env.development文件）
.env.production ——生产环境下的配置文件，会覆盖 .env这个文件里定义的环境变量

[注] ".env.[name]"是可以自定义的，前提是得在package.json里面做对应的名称修改,只是没有修改的话会默认默认

 #例如在配置文件中
 "scripts": {
     "dev": "vite --mode dev", //-开发环境时选择.env.dev作为环境配置文件
     "build": "vite build",
     "serve": "vite preview"
   },
复制代码

[2]获取环境变量

之前使用vuecli构建的项目可以通过process.env来获取环境变量，但是在vite中不允许了

 console.log("环境变量=>",process.env) //error
复制代码

vite中需要使用import.meta.env来获取env对象了

 //main.js
 import { createApp } from 'vue'
 import App from './App.vue'
 
 console.log("环境变量=>", import.meta.env);
 createApp(App).mount('#app')
复制代码

根据环境变量官方文档

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

[注] 在package.json中表示的环境变量的名称的优先级高于.env.[mode]文件中配置的

 //例如在项目根目录下创建一个.env.dev文件
 MODE_DEV=development //定义env对象的MOOD的名称
 VITE_Name=jack
 //package.json
 "dev": "vite --mode dev",
复制代码

[注] 只有以 VITE_ 为前缀的变量才会暴露给经过vite处理的代码。例如：才能通过import.meta.env.VITE_Name相应变量的值。（vite环境下为VITE，vuecli环境下为VUE)

[2]配置文件说明

环境变量的权重

 .env.[mode].local > .env.[mode] > .env.local > .env 
复制代码

[3]配置文件中的变量名问题

我们在 Vue 的前端代码中打印出的 process.env 与 vue.config.js配置文件中输出的可能是不一样的。

扫描二维码关注公众号，回复： 13404006 查看本文章

vuecli

推荐环境配置文件中以 VUE_APP_ 开头（NODE_ENV 和 BASE_URL 这两个特殊变量除外）
这样才能在项目(客户端）代码中通过process.env获取到该变量（在配置vue.config.js（服务端）文件中取到）
其原理为webpack DefinePlugin 内置插件的相关内容，将process.env注入到客户端代码中。
但是经过CLI封装后仅支持注入环境配置文件中以VUE_APP_ 开头的变量，而 NODE_ENV 和 BASE_URL 这两个特殊变量除外。

vite

为了防止意外地将一些环境变量泄漏到客户端，在vite中同理：要以 VITE_ 为前缀的变量才会暴露前端代码（客户端）
不同于vuecli可以在vue.config.js中直接通过process.env直接获取环境变量，在vite中是不可以直接使用import.meta.env来获取的
这里有一个模式的概念，需要根据项目的一些需求来进行配置获取，详见官方文档吧