关于.env环境变量文件的配置与来源

关于.env环境变量文件的配置与来源

前言：

相信有很多小伙伴在做vue项目的时候，在使用教程提供的模板的时候一定看到过这样的文件

而他们的内容更是让人摸不着头脑，不知道是用来干嘛的(以下是vite)

# .env.development
VITE_APP_CALLBACK=http://consult-patients.itheima.net

# .env.production
VITE_APP_CALLBACK=https://cp.itheima.net

当我们在查阅资料之后，才知道，.env.development对应的是开发环境下的环境变量，.env.production对应的是生产环境下的环境变量，而在项目中引用这个变量呢？

相信各大教程也提供了相应的使用方案，就是调用node的一个全局变量来使用，但是得分情况，分什么情况呢？就是vue-cli和vite的情况，这两种情况对定义环境变量和使用环境变量的方式不同，详解如下

1. 环境模式

Vue CLI 和 Vite 都支持多种环境模式，这些模式主要用于为不同的开发和部署场景提供不同的配置选项。下面是它们各自支持的环境模式：

Vue CLI

Vue CLI 默认支持以下三种环境模式：

• development：开发环境，一般用于本地开发调试。
• production：生产环境，一般用于项目上线部署。
• test：测试环境，一般用于执行单元测试和集成测试。

除了默认的三种环境模式外，还可以通过 .env 文件来定义其他的环境模式。例如，可以在项目根目录下创建一个 .env.staging 文件来定义一个名为 staging 的自定义环境模式。这样，可以在命令行中使用 --mode 参数来指定当前所使用的环境模式。例如，可以使用以下命令来启动一个名为 staging 的环境模式：

vue-cli-service serve --mode staging

Vite

Vite 默认支持以下两种环境模式：

• development：开发环境，一般用于本地开发调试。
• production：生产环境，一般用于项目上线部署。

除了默认的两种环境模式外，还可以通过 .env 文件来定义其他的环境模式。例如，可以在项目根目录下创建一个 .env.test 文件来定义一个名为 test 的自定义环境模式。这样，可以在命令行中使用 --mode 参数来指定当前所使用的环境模式。例如，可以使用以下命令来启动一个名为 test 的环境模式：

vite serve --mode test

2. 在vue-cli构建的项目中使用环境变量

1. 定义环境变量

# 在vue-cli构建的项目中，只有使用VUE_APP_*定义的变量，才会被 webpack.DefinePlugin 嵌入到客户端侧的包中
VUE_APP_API_URL = http://localhost:8080/api

2. 你可以在项目中这样使用这个变量

console.log( process.VUE_APP_URL )

3. 除了VUE_APP_*定义的变量之外，在VUE-cli项目中还有两个始终可用的全局变量NODE_ENV和BASE_URL

   • NODE_ENV：会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。

   • BASE_URL：- 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

   • 关于这两个变量我也举了一个使用的例子供大家参考

     // vue.config.js
     module.exports = {
       // 根据当前环境来决定 publicPath 的路径
       publicPath: process.env.NODE_ENV === 'production'
         ? '/production-sub-path/'
         : '/'
     }
     

   • 最后一个小点，就是有时候我们有时候有一些不该提交到代码仓库中的变量的时候，尤其是代码托管到公共仓库的时候，这时候为了造成不必要的麻烦，我们应该使用.env.local来代替，.local的意思是可以被指定环境加载，但被git忽略，像其它模式的到环境变量，也可以添加.local来实现这个效果

3. 在vite项目中使用环境变量

参考信息 环境变量和模式

1. 首先，在vite中，使用环境变量是通过import.meta.env.xxx来引用，值得注意的是，它不支持动态引用，即import.meta.env[xxx]是无效的，请使用静态字符串

2. vite也提供了许多的默认环境变量

   • 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相反)。
   • import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

3. 只有VITE_*前缀的变量才会以字符串的形式暴露给客户端源码

   # .env.development
   VITE_API_URL = http://localhost:8080/apis
   
   # .env.production
   VITE_API_URL = https://test.api.com/apis
   

   使用：

   console.log(import.meta.env.VITE_API_URL)		// 这行代码会在不同的环境变量下打印不同的值
   

m/apis

使用：

```js
console.log(import.meta.env.VITE_API_URL)		// 这行代码会在不同的环境变量下打印不同的值

4. 另外，vite是支持自定义变量前缀的，我这里就不多赘述了，增加心智负担，详情请看 共享配置 | Vite 官方中文文档 (vitejs.dev)