当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.jsimport { defineConfig } from 'vite';export default defineConfig({ base: '/docs/reconstatus/', // 将此路径替换为您的实际部署子目录 plugins: [], // 其他插件配置 // ... 其他Vite配置});
执行构建：配置完成后，您只需运行常规的构建命令即可：
vite build
Vite会自动读取vite.config.js中的base配置并应用到构建输出中。
动态配置base路径：在某些情况下，您可能希望根据不同的环境（如开发、测试、生产）或部署目标动态设置base路径。您可以使用环境变量来实现这一点：
// vite.config.jsimport { 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构建输出的相对公共路径的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/297215.html
微信扫一扫 
支付宝扫一扫 
