如何在Vite服务器配置中设置可在Vue文件读取的环境变量？

直接在configureServer里赋值import.meta.env.VITE_ENV_VAR是行不通的——这个钩子运行在Node.js服务端上下文，而import.meta.env是客户端代码专属的变量，两者不在同一个运行环境里。

要实现需求，你需要通过修改Vite的define配置来注入客户端可访问的环境变量，在configureServer中可以直接操作server.config.define：

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'test-plugin',
      configureServer(server) {
        // 注入客户端环境变量，保留原有define配置避免覆盖
        server.config.define = {
          ...server.config.define,
          'import.meta.env.VITE_ENV_VAR': JSON.stringify('foo')
        };
      }
    },
  ]
});

关键细节说明： #

• define中的键必须是完整的import.meta.env.VITE_ENV_VAR字符串，Vite会在编译客户端代码时将这个字符串替换为对应的值。
• 值必须用JSON.stringify()处理：因为define注入的是代码字面量，直接写'foo'会被当成变量名，转成字符串后才能被客户端识别为字符串值。
• 用扩展运算符保留原有define配置，避免覆盖Vite默认注入的其他环境变量。

完成后，你就能在.vue文件中正常访问这个变量了：

<script setup lang="ts">
const envVar = import.meta.env.VITE_ENV_VAR;
console.log(envVar); // 输出 'foo'
</script>

内容的提问来源于stack exchange，提问作者naivedeveloper