环境变量

环境变量可以帮助我们同时兼顾开发环境和生产环境。在浏览器端和服务器端有不同的访问方式。

浏览器端

可以使用 import.meta.env 来访问环境变量；import.meta.env是一个特殊的全局变量，在运行时提供了环境变量的访问，仅可用作浏览器端。

1. 在开发环境中访问时，会输出以下默认的环境变量：

2. 在开发环境中访问时，会输出以下默认的环境变量：

添加环境变量

添加环境变量，在项目根目录下创建.env.[name]：

• 开发环境name可以为默认的development，生产环境可以为默认的production，也就是跟默认环境变量的MODE一样；定义环境变量具有约定，变量名前需要为VITE_，例如：

.env.development

VITE_HTTP=http://localhost:5173/

VITE_Rarrot='123'

• 如果name不为默认的production，则需要在package.json中script下的build后添加--mode [name]才会生效，例如name是prod，修改为：

.env.prod(非默认)

VITE_HTTP=https://www.rarrot.ren

VITE_Rarrot='456'

package.json

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build --mode prod",
    "preview": "vite preview"
  },

提示

环境变量不可以动态修改。

服务器端

环境变量通常可以从 process.env 获得。

在 Vite 的配置文件vite.config.ts 或 vite.config.js中，需要使用Node.js 的 process.cwd() 来获取当前目录下的环境变量。

想要访问到项目根目录下新增的环境变量还需要使用vite的loadEnv来来加载指定的 .env 文件。

loadEnv接收两个必选参数为mode当前环境名，envDir当前目录下的环境变量；可选参数为prefixes，用于加载所有环境变量，而不管是否有 VITE_ 前缀。例如：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { PostCssPxToViewport } from './plugins/postcss-px-to-viewport'

export default ({ mode }: any) => {
  // 开发环境打印为development，生产环境为prod
  console.log(mode)
  // 将打印前缀为'VITE_'的环境变量
  console.log(loadEnv(mode, process.cwd()));
  // 将打印所有环境变量  
  // console.log(loadEnv(mode, process.cwd(), ''));
  return defineConfig({
    plugins: [
      vue(),
    ],
    css: {
      postcss: {
        plugins: [PostCssPxToViewport()]
      }
    }
  })
}