Vue3-CLI项目中.env文件的正确创建位置及变量读取问题

文件位置说明 #

你当前的存放位置是错误的。@/在Vue3-CLI中默认指向项目的src目录，而.env系列配置文件必须放在项目根目录——也就是和package.json、vue.config.js、public文件夹同级的目录。

自定义变量不显示的原因及解决 #

除了位置问题，还有一个核心规则：Vue3-CLI只会注入以VUE_APP_为前缀的自定义环境变量到process.env中，未加前缀的变量不会被识别。

正确配置示例 #

在项目根目录的.env.development中编写：

VUE_APP_SERVER_ROOT=https://your-server-domain.com

生效步骤 #

1. 将.env和.env.development文件移动到项目根目录
2. 确保自定义变量前缀为VUE_APP_
3. 重启开发服务（执行npm run serve），之后就能在process.env中看到自定义变量了

注：你当前看到的BASE_URL和NODE_ENV是Vue CLI默认注入的系统变量，不受前缀规则限制。

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