Vue3中如何从main.js访问.env环境变量？

针对Vue CLI创建的项目 #

• 先修改.env文件，环境变量名必须以VUE_APP_为前缀：

VUE_APP_BASE_URL = https://www.my-site.com/wp/wp-json

• 然后在main.js里直接调用：

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL

• 原理：Vue CLI只会把带VUE_APP_前缀的环境变量注入到客户端代码中，无前缀的变量不会被处理，这就是你遇到process is not defined报错的原因。

针对Vite创建的项目 #

• 先修改.env文件，变量名要以VITE_为前缀：

VITE_BASE_URL = https://www.my-site.com/wp/wp-json

• 接着在main.js里用import.meta.env访问：

axios.defaults.baseURL = import.meta.env.VITE_BASE_URL

• 原理：Vite不支持process.env，而是用import.meta.env来管理环境变量，只有带VITE_前缀的变量会被暴露给客户端代码。

注意事项 #

• 修改.env文件后，必须重启开发服务器，否则新配置的环境变量不会生效。
• 生产构建前要确认.env配置正确，构建过程会自动注入对应的环境变量。

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