vue2怎么配置环境变量,让不同环境使用
时间: 2024-04-23 13:26:00 浏览: 145
在 Vue CLI 2.x 中,你可以在项目根目录下创建多个环境变量文件来实现不同环境使用不同的变量值。例如:
- `.env`: 默认的环境变量文件,被所有的环境共享。
- `.env.local`: 本地环境变量文件,会覆盖共享的环境变量。
- `.env.[mode]`: 与指定模式相匹配的环境变量文件,例如 `.env.development` 文件只会被 `npm run dev` 命令使用。
在这些文件中,你可以定义一些变量,如:
```
VUE_APP_API_URL=http://localhost:3000
```
其中 `VUE_APP_` 前缀是必须的,用于让 Vue CLI 将这些变量注入到应用程序中。你可以在代码中使用 `process.env.VUE_APP_API_URL` 来访问这个变量的值。
在不同的环境中,你可以使用不同的变量值,例如:
- 在 `development` 环境中,你可以在 `.env.development` 文件中定义变量的值,例如 `VUE_APP_API_URL=http://localhost:3000`。
- 在 `production` 环境中,你可以在 `.env.production` 文件中定义变量的值,例如 `VUE_APP_API_URL=https://api.example.com`。
在 `npm run` 命令中,你可以使用 `--mode` 命令来指定环境模式,例如 `npm run dev -- --mode development`。在这种情况下,Vue CLI 将会使用 `.env.development` 文件中定义的变量值。
如果你想在代码中访问非 `VUE_APP_` 前缀的环境变量,可以使用 `process.env` 对象来访问,例如 `process.env.NODE_ENV`。
阅读全文