vue3+nuxt3 配置环境变量
时间: 2024-08-22 07:02:10 浏览: 107
Vue3 和 Nuxt3 结合使用时配置环境变量通常涉及到以下几个步骤:
1. **创建.env文件**: 在项目根目录下创建一个名为`.env`的隐藏文件,用于存储敏感信息如API地址、数据库连接等。这些内容不应直接放在代码中。
```bash
touch .env
```
2. **添加环境变量**:
在`.env`文件中,每一行对应一个环境变量,格式通常是`VARIABLE_NAME=variable_value`,例如:
```
API_URL=http://localhost:8080
DB_HOST=localhost
DB_PORT=5432
```
3. **使用插件处理环境变量**:
使用Nuxt的`dotenv`插件可以方便地读取并注入环境变量到应用中。首先安装它:
```bash
npm install dotenv nuxt-plugin-dotenv
```
然后在`nuxt.config.js`中引入并启用插件:
```js
import Dotenv from 'nuxt-plugin-dotenv'
export default {
plugins: [
{ src: '~/plugins/dotenv', ssr: true },
],
}
```
4. **在Vue组件中访问**:
你可以使用`process.env`对象在Vue组件中安全地获取这些环境变量,它们会自动注入到全局作用域内。
```vue
<script>
export default {
computed: {
apiUrl() {
return process.env.API_URL;
},
dbHost() {
return process.env.DB_HOST;
},
},
};
</script>
```
阅读全文
相关推荐


















