前端 - vue - - vue中如何获取环境变量以及import.meta.env和process.env的区别

我们先了解import.meta和process的运行环境：

import.meta的运行环境是浏览器 属于浏览器特性 而process的运行环境是服务端（node、ssr） 所以我们在VUE3项目中使用process获取环境变量是不可以的

vue3+vite获取环境变量：

// .env.development 变量必须以VITE_开头
VITE_BASE_URL=https://baseurl.com
TEST_URL=https://test.com #访问不到

// index.ts/index.vue
console.log(import.env.VITE_BASE_URL) //输出https://baseurl.com

vite.config.ts中获取环境变量有所不同 因其运行在node环境中 所以不能使用import.meta vite只会将以VITE_开头的环境变量注入到import.meta中 而不会注入到process中 虽然vite.config.ts是运行在node环境中的 但我们还需要显示加载

import {defineConfig,localEnv} from 'vite'

//viteconfig中一般会有两种声明defineConfig的写法
//1、全写
export defineConfig(({mode})=>{
  const env = localEnv(mode,process.cwd())

  return {
    server: {
      proxy: {
        '/api': {
          target: env.VITE_BASE_URL, // 从加载的 env 中读取
          changeOrigin: true,
        }
      }
    }
  })

//2、缩写
const env = loadEnv(process.env.NODE_ENV || 'development', process.cwd())
export defineConfig({
  server: {
      proxy: {
        '/api': {
          target: env.VITE_BASE_URL, // 从加载的 env 中读取
          changeOrigin: true,
        }
      }
    }
})

vue2+webpack中获取环境变量：

webpack会通过DefinePlugin将process.env替换为静态字符串 所以可以使用process.env获取环境变量

// .env.development 必须以VUE_APP为前缀
VUE_APP_BASE_URL=https://baseurl.com

// index.js/index.vue/vue.config.js
process.env.VUE_APP_BASE_URL // 输出https://baseurl.com

总结：

import meta运行在浏览器端 是ESM特性 vue.config.js属于ESM（扩展名为js）所以vue2+webpack可以直接使用

process运行在服务端 是nodejs变量 vite.config.ts属于CommonJS（扩展名为ts）所以vite.config.ts可以直接使用process 而不能直接使用import.meta.env 否则回报env不存在meta中

那为什么index.ts中可以使用import.meta?

vite在构建时会默认将代码转为ESM格式 即使扩展名为.ts（tsconfig.json中的module可以决定到底是转为ESM还是COM）