Nuxt.js 是一个基于 Vue.js 的框架,用于创建服务器渲染的应用程序(SSR)、静态站点生成(SSG)或单页应用程序(SPA)。在 Nuxt.js 中,可以通过设置环境变量来配置 baseURL
,这个 baseURL
通常用于设置 API 请求的基础路径。
在 Nuxt.js 项目中,可以在两个地方设置 baseURL
:
- nuxt.config.js: 这是设置项目级别配置的地方。你可以在这里设置一个默认的
baseURL
,这将应用于开发和生产环境,但也可以根据环境变量来覆盖它。 - 环境变量: 使用
.env
文件或环境变量直接设置baseURL
,这样可以在不同环境(开发、生产等)中使用不同的值。
在 nuxt.config.js
中设置 baseURL
你可以在 nuxt.config.js
文件中通过设置 axios
模块的 baseURL
选项来定义 baseURL
。这个模块会自动将 baseURL
注入到应用程序中的 axios 实例中。
javascriptexport default { // ... axios: { // API server baseURL baseURL: process.env.BASE_URL || 'http://localhost:3000' }, // ... }
在上面的代码示例中,process.env.BASE_URL
是一个环境变量,你可以在项目的 .env
文件中设置它,或者在命令行中直接设置。如果 BASE_URL
没有被设置,那么将回退到 'http://localhost:3000'
作为默认值。
使用 .env
文件设置 baseURL
在项目的根目录下创建一个 .env
文件,然后在文件中设置 BASE_URL
环境变量。
shellBASE_URL=https://api.example.com
然后,你需要安装 @nuxtjs/dotenv
模块来使 Nuxt.js 读取 .env
文件:
bashnpm install @nuxtjs/dotenv
接下来,在 nuxt.config.js
文件中包含这个模块:
javascriptrequire('dotenv').config(); export default { modules: [ '@nuxtjs/dotenv', ], // ... axios: { baseURL: process.env.BASE_URL }, // ... }
在运行时设置环境变量
在开发模式下,你可以在启动 Nuxt.js 服务器时设置环境变量:
bashBASE_URL=https://api.example.com nuxt
在生产模式下,如果你使用的是如 PM2 这样的进程管理器,你可以在启动应用程序时设置环境变量:
bashBASE_URL=https://api.example.com pm2 start npm --name "my-app" -- run start
或者在你的生产环境部署脚本中设置环境变量。
确保在设置这些变量时遵循你所使用的平台或服务的安全和最佳实践指南。例如,在 Vercel、Netlify 或 Heroku 这样的平台上,你可以在它们的控制面板中安全地设置环境变量。
这样设置之后,你的 Nuxt.js 应用程序中的所有 HTTP 请求就会自动使用正确的 baseURL
,无论是在开发还是在生产环境中。