来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

环境变量

让开发者区分不同的运行环境，实现兼容开发和生产。

例如npm run dev是开发环境、npm run build是生产环境。

Vite在一个特殊的import.meta.env对象上暴露环境变量，可以在各.vue文件中读取。

而在vite.config.ts中需要通过process.env读取，它会打印电脑上所有的环境变量。

一些在所有情况下都可以使用的内联变量：

1
2
3
4
5
6
7
{
  "BASE_URL":"/", //部署时的URL前缀
  "MODE":"development", //运行模式
  "DEV":true,  //是否在dev环境
  "PROD":false, //是否是build 环境
  "SSR":false //是否是SSR 服务端渲染模式
}

不能对环境变量使用动态赋值import.meta.env[key]，因为这些环境变量在生产环境打包时会被使用JSON.stringify硬编码注入浏览器。

自定义环境变量

在项目根目录新建.env.development（开发环境）或.env.production（生产环境）文件，并写入变量，例如：

1
VITE_HTTP = http://www.baidu.com

不需要配置，默认会在不同的环境中读取对应的文件。

vite.config.ts中默认无法读取自定义环境变量，需要引入Vite的loadEnv包，并更改文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// import vueJsx from '@vitejs/plugin-vue-jsx'
import tsx from "./plugin/index"
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default ({mode}:any) => {
  // mode：当前运行的模式
  console.log(mode)
  // process.cwd()：获取vite根目录
  console.log(loadEnv(mode,process.cwd()))
  return defineConfig({
    plugins: [
      vue(),
      // vueJsx(),
      tsx(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
        imports: ["vue"],
        dts: "src/auto-import.d.ts"
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/bem.scss";`
        }
      }
    }
  })
}