nuxt3 环境变量配置
时间: 2024-06-03 20:04:57 浏览: 221
配置环境变量
在 Nuxt.js 3 中,您可以通过 `.env` 文件和 `process.env` 对象来配置环境变量。
`.env` 文件可以在您的项目根目录下创建,其中包含您要设置的环境变量的键值对。例如:
```
API_URL=https://api.example.com
```
在您的代码中,您可以通过 `process.env` 对象来访问这些环境变量。例如:
```
async asyncData({ $axios }) {
const response = await $axios.get(`${process.env.API_URL}/data`)
return { data: response.data }
}
```
请注意,在开发模式下,Nuxt.js 3 会自动加载 `.env.development` 文件中的环境变量。如果您想要在生产模式下使用环境变量,则需要将它们放入 `.env.production` 文件中,并使用 `nuxt build` 命令来构建您的应用程序。
如果您想要在构建时动态设置环境变量,则可以使用 `nuxt.config.js` 文件中的 `publicRuntimeConfig` 和 `privateRuntimeConfig` 选项。例如:
```
export default {
publicRuntimeConfig: {
API_URL: process.env.API_URL
},
privateRuntimeConfig: {
API_SECRET: process.env.API_SECRET
}
}
```
在代码中,您可以通过 `this.$config` 对象来访问这些运行时配置。例如:
```
async asyncData({ $axios }) {
const response = await $axios.get(`${this.$config.API_URL}/data`, {
headers: {
Authorization: `Bearer ${this.$config.API_SECRET}`
}
})
return { data: response.data }
}
```
阅读全文