Vite 配置文件中base 根路径 '/'与相对路径 './‘的区别

在 Vite 配置文件中，base 选项用于指定应用程序的基本公共路径。不同的 base 设置会影响构建后的文件路径，从而影响应用程序在不同环境中的行为。

base: '/' 和 base: './' 的区别

1. base: '/'

• 用途: 适用于应用程序部署在服务器根目录的情况。
• 效果: 构建后的所有静态资源路径都是绝对路径，从根目录开始。例如，/assets/main.js。
• 场景: 当你的应用程序直接部署在域名的根路径上（如 https://example.com/）时使用。

2. base: './'

• 用途: 适用于应用程序部署在子目录或需要相对路径的情况。
• 效果: 构建后的所有静态资源路径都是相对路径。例如，./assets/main.js。
• 场景: 当你的应用程序可能部署在子目录（如 https://example.com/subdir/）或者需要在本地文件系统中查看（如直接打开 index.html 文件）时使用。

示例

base: '/'

配置：

export default defineConfig({
  base: '/',
  plugins: [vue()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html')
      }
    }
  }
});

构建后的 HTML 可能包含：

<script type="module" src="/assets/main.js"></script>
<link rel="stylesheet" href="/assets/main.css">

base: './'

配置：

export default defineConfig({
  base: './',
  plugins: [vue()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html')
      }
    }
  }
});

构建后的 HTML 可能包含：

<script type="module" src="./assets/main.js"></script>
<link rel="stylesheet" href="./assets/main.css">

选择合适的 base

• 如果你的应用程序将部署在服务器的根路径，并且你希望所有静态资源路径都是绝对路径，那么使用 base: '/'。
• 如果你的应用程序将部署在子目录，或者你需要在本地文件系统中查看构建的 HTML 文件，那么使用 base: './'。

在 Nginx 上的影响

• 使用 base: '/': 你需要确保 Nginx 的 root 指令正确指向构建输出目录，并且处理静态资源的路径从根目录开始。
• 使用 base: './': 你需要确保 Nginx 能正确解析相对路径，通常这不会有太大问题，但在某些复杂的子目录部署场景中需要特别注意。

最佳实践

对于大多数部署在服务器根路径的应用程序，推荐使用 base: '/'。这通常可以避免路径解析问题，并确保应用程序在不同环境中行为一致。如果你有特殊的部署需求（如子目录），则根据具体情况选择相对路径。