当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，从而确保在部署到子目录时能够正确加载。
注意事项：
- 路径格式： 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应用。
