环境变量

环境变量：它的作用就是让开发者区分不同的运行环境，来实现兼容开发和生产。

例如npm run dev默认就是开发环境（development），npm run build默认就是生产环境（production）等等。

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

{
    "BASE_URL": "/", // 部署时的URL前缀
    "MODE": "development", // 运行模式
    "DEV": true, // 是否为开发环境
    "PROD": false // 是否为生产环境
    "SSR": false // 是否为SSR服务端渲染模式
}

需要注意的是，这个环境变量不能使用动态获取或者是赋值，import.meta.env[key]的方式，因为这些环境变量在打包的时候会被硬编码的通过JSON.stringify注入到浏览器中。

在不同的环境下可以做不同的事，比如开发环境和生产环境的请求地址的前缀，生产环境为'/api'，开发环境为'/devApi'这些

自定义环境变量

需要自定义环境变量，首先得在项目根目录创建.env.[mode]文件，mode指的是环境模式，是开发还是生产还是说其他，对应import.meta.env.MODE的值，假如import.meta.env.MODE的值为development开发环境，那么就会去加载.env.development这个环境文件。
```
.env.development // 开发环境
.env.production // 生产环境
```
声明自定义环境变量需要注意的是，自定义环境变量的名字，必须以VITE开头，变量名全部大写，多个单词只见使用下划线连接。

.env.development:
```
VITE_BASE_API = /api
```

TS智能提示

要想做到这一点，你可以在 src 目录下创建一个 env.d.ts 文件，接着按下面这样增加 ImportMetaEnv 的定义：

interface ImportMetaEnv {
    readonly VITE_BASE_API: string
}

interface ImportMeta { 
    readonly env: ImportMetaEnv 
}

在html文件中使用环境变量

import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>%VITE_TITLE%</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

指定启动/打包项目时的模式

比如说：我需要在本地开发环境调线上的接口，通过指定环境模式的方式：

项目根目录创建了.env.online的文件，并设置NODE_ENV=development：

# .env.online

NODE_ENV=development

VITE_BASE_API=/api

你在文件中指定了NODE_ENV的话，那么加载文件的时候，当前的环境变量就根据NODE_ENV的值来决定，比如NODE_ENV=development那么此时就是开发环境。

然后去更改 package.json：

"scripts": {
    "dev": "vite --mode online"
}

指定了模式后，那么vite就会去加载对应的.env.[mode]的文件，比如这里模式指定为online，那么就会去加载.env.online文件。

不同环境下显示不同的网站标题

开发环境

.env.development：

VITE_TITLE=开发环境-xxx

index.html：

<title>%VITE_TITLE%</title>

生产环境 .env.production：

VITE_TITLE=开发环境-xxx

index.html：

<title>%VITE_TITLE%</title>

在vite.config.ts中使用环境变量

在vite.config.ts中是无法通过import.meta.env这种方式去使用环境变量的。

需要通过process去获取，通过process.env可以获取电脑机器的环境变量，但是这种方式获取不了**.env.[mode]文件夹里面的自定义环境变量。

我们需要通过vite的loadEnv的方式去获取：

load(mode, URL)

mode：模式，是development还是production，还是其他自定义的
URL：.env.[mode]文件所在的地址，因为我们一般都是在项目根目录创建的，所以可以使用process.cwd()，它返回当前项目的根目录的地址。

.env.development：

VITE_TITLE = 宇智波带土

将vite.config.ts中的export default对外暴露的结构修改为下面这种形式：

vite.config.ts：

import {  loadEnv, type UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default ({ mode }): UserConfig => {

  const { VITE_PREFIX, VITE_BASE_URL } = loadEnv(mode, process.cwd(), '')

  return{
    plugins: [vue(), eslint()],
    ...
    server: {
      proxy: {
        '/api': {
          target: VITE_PREFIX,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, VITE_BASE_URL)
        }
      }
    },
    ...
  }
}

笔记-第二十八章-环境变量（自用）