配置Vite构建输出的相对公共路径

当Vite应用部署到Web服务器的子目录时，默认的绝对路径配置可能导致资源加载404错误。本文将详细介绍如何通过配置Vite的`base`选项，将构建输出中的所有资源路径调整为相对于指定公共路径，从而确保应用在子目录中正确运行。我们将探讨命令行参数和配置文件两种配置方式，并提供实用示例。

理解Vite构建输出的路径问题

在Vite开发模式下，通常通过http://localhost:3000访问应用，此时所有资源路径（如/src/assets/logo.png、/js/main.js）都相对于根目录。然而，当我们将Vite构建后的dist目录内容部署到Web服务器的子目录时，例如http://myapp.com/docs/reconstatus/，问题便会浮现。

Vite默认生成的HTML文件中的资源链接通常以/开头，这意味着它们是相对于网站的根目录。例如，src="/js/app.js" 会尝试从http://myapp.com/js/app.js加载文件，而不是我们期望的http://myapp.com/docs/reconstatus/js/app.js。这导致浏览器无法找到资源，从而引发404错误，使得应用无法正常运行。

解决方案：配置公共基础路径（Public Base Path）

Vite提供了base配置选项来解决这个问题。base选项允许我们指定一个公共基础路径，Vite在构建时会用这个路径作为前缀来生成所有静态资源的URL。

1. 通过命令行参数配置

最直接的方式是在执行构建命令时，通过--base参数来指定公共基础路径。这对于临时测试或特定部署场景非常有用。

示例： 假设您的应用将部署到http://myapp.com/docs/reconstatus/子目录。您可以在构建时这样指定base路径：

vite build --base=/docs/reconstatus/

解释： 执行此命令后，Vite会将所有生成的资源链接（例如CSS、JS、图片等）前缀为/docs/reconstatus/。例如，原本的/js/app.js会变成/docs/reconstatus/js/app.js，从而确保在部署到子目录时能够正确加载。

注意事项：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

58

查看详情

• 路径格式： base路径必须以斜杠开头，并以斜杠结尾，表示这是一个目录。例如，/my/public/path/。
• 优先级： 命令行参数的优先级高于vite.config.js中的配置。

2. 通过vite.config.js文件配置

对于更持久或项目级的配置，建议在Vite的配置文件vite.config.js中设置base选项。这使得配置与项目代码一同管理，更易于维护。

示例： 在vite.config.js中添加或修改base属性：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  base: '/docs/reconstatus/', // 将此路径替换为您的实际部署子目录
  plugins: [], // 其他插件配置
  // ... 其他Vite配置
});

执行构建： 配置完成后，您只需运行常规的构建命令即可：

vite build

Vite会自动读取vite.config.js中的base配置并应用到构建输出中。

动态配置base路径： 在某些情况下，您可能希望根据不同的环境（如开发、测试、生产）或部署目标动态设置base路径。您可以使用环境变量来实现这一点：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
  let base = '/'; // 默认根路径

  if (mode === 'production') {
    // 生产环境可能部署到子目录
    base = process.env.VITE_APP_BASE_PATH || '/docs/reconstatus/';
  }

  return {
    base,
    plugins: [],
    // ... 其他Vite配置
  };
});

然后，在构建时通过环境变量传递路径：

VITE_APP_BASE_PATH=/docs/reconstatus/ vite build

总结

正确配置Vite的base选项是确保应用在非根目录下（即部署到子目录）正常运行的关键。无论是通过命令行参数进行临时设置，还是通过vite.config.js进行项目级管理，理解其作用和正确格式都至关重要。通过将base设置为您的应用部署的公共子路径，您可以避免资源加载404错误，确保用户能够顺利访问您的Vite应用。

以上就是配置Vite构建输出的相对公共路径的详细内容，更多请关注php中文网其它相关文章！