Nuxtjs 如何在开发或生产中设置 baseURL

Nuxt.js 是一个基于 Vue.js 的框架，用于创建服务器渲染的应用程序（SSR）、静态站点生成（SSG）或单页应用程序（SPA）。在 Nuxt.js 中，可以通过设置环境变量来配置 baseURL，这个 baseURL 通常用于设置 API 请求的基础路径。

在 Nuxt.js 项目中，可以在两个地方设置 baseURL：

1. nuxt.config.js: 这是设置项目级别配置的地方。你可以在这里设置一个默认的 baseURL，这将应用于开发和生产环境，但也可以根据环境变量来覆盖它。
2. 环境变量: 使用 .env 文件或环境变量直接设置 baseURL，这样可以在不同环境（开发、生产等）中使用不同的值。

在 nuxt.config.js 中设置 baseURL

你可以在 nuxt.config.js 文件中通过设置 axios 模块的 baseURL 选项来定义 baseURL。这个模块会自动将 baseURL 注入到应用程序中的 axios 实例中。

javascript
export 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 环境变量。

shell
BASE_URL=https://api.example.com

然后，你需要安装 @nuxtjs/dotenv 模块来使 Nuxt.js 读取 .env 文件：

bash
npm install @nuxtjs/dotenv

接下来，在 nuxt.config.js 文件中包含这个模块：

javascript
require('dotenv').config();

export default {
  modules: [
    '@nuxtjs/dotenv',
  ],
  // ...
  axios: {
    baseURL: process.env.BASE_URL
  },
  // ...
}

在运行时设置环境变量

在开发模式下，你可以在启动 Nuxt.js 服务器时设置环境变量：

bash
BASE_URL=https://api.example.com nuxt

在生产模式下，如果你使用的是如 PM2 这样的进程管理器，你可以在启动应用程序时设置环境变量：

bash
BASE_URL=https://api.example.com pm2 start npm --name "my-app" -- run start

或者在你的生产环境部署脚本中设置环境变量。

确保在设置这些变量时遵循你所使用的平台或服务的安全和最佳实践指南。例如，在 Vercel、Netlify 或 Heroku 这样的平台上，你可以在它们的控制面板中安全地设置环境变量。

这样设置之后，你的 Nuxt.js 应用程序中的所有 HTTP 请求就会自动使用正确的 baseURL，无论是在开发还是在生产环境中。