vue-cli-service 配置环境变量
时间: 2024-12-25 07:13:54 浏览: 161
Vue CLI Service (VCS) 是 Vue.js 提供的一个脚手架工具,用于管理和构建 Vue 应用程序。它支持配置环境变量,特别是对于处理敏感信息如API密钥、数据库连接等,这些通常会被存储在 `.env` 文件中,以保持项目的安全性。
要在 VCS 中配置环境变量,你需要按照以下步骤操作:
1. **创建.env文件**:
- 在项目根目录下,如果没有 `.env` 文件,可以手动创建一个新的文本文件,名为 `.env`,这是默认的环境变量文件。
- Windows用户可能需要将文件名改为 `.env.production` 或 `.env.development` 根据你的开发阶段选择合适的环境。
2. **添加环境变量**:
- 使用标准的键值对格式编写,例如 `VUE_APP_API_KEY=your_api_key`。这里的 `VUE_APP_` 是一个约定前缀,方便识别哪些是应用相关的环境变量。
3. **启用环境变量**:
- 打开 `vue.config.js` 文件(如果是 v4),或者在 `package.json` 的 scripts 对象内(如果是 v3)。在这里,你可以配置 VCS 来读取环境变量,如下所示:
```javascript
// vue.config.js (v4)
module.exports = {
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.resolve.symlinks(true).alias
.set('@env', resolve('src/environments'))
}
},
};
// package.json (v3)
"scripts": {
"dev": "cross-env VUE_APP_API_KEY=<your_api_key> vue-cli-service serve",
"build": "vue-cli-service build"
}
```
4. **引用环境变量**:
- 在你的 Vue 组件、路由守卫或任何其他地方,你可以通过 `import()` 或 `process.env.VUE_APP_API_KEY` 访问这些环境变量。
阅读全文
相关推荐




















