当Vite应用部署到子文件夹而非网站根目录时，由于默认构建输出的资源路径是绝对的，可能导致404错误。本文将详细介绍如何通过配置Vite的`base`选项，确保在子路径部署场景下，应用能正确加载所有静态资源，从而解决资源路径不匹配的问题。
在开发Vite应用时，我们通常通过npm run dev在http://localhost:3000等地址进行测试，此时所有资源路径都能正确解析。然而，当应用需要部署到服务器的某个子文件夹中，例如http://myapp.com/docs/reconstatus，并将Vite构建生成的dist目录内容放置在该子文件夹下时，就会出现问题。Vite默认生成的HTML文件中的资源（如JavaScript、CSS、图片等）链接通常以/开头，这意味着它们是相对于网站根目录的绝对路径。在上述例子中，浏览器会尝试从http://myapp.com/js/main.js加载资源，而不是正确的http://myapp.com/docs/reconstatus/js/main.js，从而导致404错误。
为了解决这个问题，我们需要告诉Vite在构建时，为所有生成的资源路径添加一个公共的基础前缀。Vite提供了base配置选项来专门处理这种情况。
配置Vite构建输出的公共基础路径
Vite的base选项允许您指定部署的公共基础路径。所有静态资源（如脚本、样式表、图片等）的URL都将以此路径为前缀。
方法一：通过命令行参数进行配置
您可以在执行构建命令时，直接通过–base参数来指定基础路径。这种方法适用于需要临时或快速更改基础路径的场景。
示例：假设您的应用将部署到/docs/reconstatus/子路径下，您可以在package.json的scripts中修改构建命令，或者直接在终端执行：
vite build --base=/docs/reconstatus/
请注意，路径末尾的斜杠/通常是必要的，以确保路径被正确地视为一个目录。
方法二：通过Vite配置文件进行配置（推荐）
更常见和推荐的做法是在vite.config.js（或vite.config.ts）配置文件中设置base选项。这种方式更为持久和易于管理，尤其是在团队协作或复杂项目配置中。
示例：在您的vite.config.js文件中添加或修改base属性：
// vite.config.jsimport { defineConfig } from 'vite';export default defineConfig({ base: '/docs/reconstatus/', // 将此路径替换为您的实际部署子路径 plugins: [ // ...您的其他插件 ], // ...其他Vite配置项});
关于base值的说明：
绝对公共路径 (例如: /docs/reconstatus/): 当您的应用部署在一个已知的、固定的子路径下时，使用这种形式。Vite会生成类似/docs/reconstatus/assets/index-XXXX.js的路径。
相对路径 (例如: ./ 或 ”): 如果您的应用部署在一个未知或不固定的子路径下，或者需要将构建产物上传到CDN，并且希望所有资源路径都相对于当前HTML文件，可以使用相对路径。当设置为./或空字符串”时，Vite会生成相对于HTML文件位置的资源路径。例如，如果HTML在/docs/reconstatus/index.html，资源路径会是./assets/index-XXXX.js，浏览器会正确解析为/docs/reconstatus/assets/index-XXXX.js。
// vite.config.jsimport { defineConfig } from 'vite';export default defineConfig({ base: './', // 或者 ''，表示相对路径 // ...});
注意事项与最佳实践
开发环境不受影响： base配置主要影响构建输出（生产环境），对于npm run dev等开发服务器，通常不需要特殊配置，因为它默认以项目根目录为基础。
路径末尾斜杠： 当base值表示一个目录时（如/docs/reconstatus/），建议在末尾添加斜杠。Vite会根据规范处理，确保生成的URL正确。
动态基础路径： 如果您的应用需要在不同的部署环境中拥有不同的基础路径（例如，开发环境、测试环境、生产环境），可以结合环境变量来动态设置base。
// vite.config.jsimport { defineConfig, loadEnv } from 'vite';export default defineConfig(({ command, mode }) => { // 根据当前模式加载环境变量 const env = loadEnv(mode, process.cwd(), ''); return { base: env.VITE_APP_BASE_PATH || '/', // 默认使用 '/'，或者从环境变量获取 plugins: [], };});
然后在您的.env.production文件中定义VITE_APP_BASE_PATH：
VITE_APP_BASE_PATH=/docs/reconstatus/
CDN部署： 如果您的静态资源部署在CDN上，base也可以设置为CDN的完整URL，例如base: ‘https://cdn.example.com/myapp/’。
总结
通过正确配置Vite的base选项，您可以轻松解决将Vite构建应用部署到非根目录子路径时遇到的资源加载问题。无论是通过命令行参数还是更推荐的配置文件方式，理解base的用途及其不同取值的含义，对于确保您的Vite应用在各种部署场景下都能正常运行至关重要。选择合适的base值（绝对路径、相对路径或CDN路径）将使您的Vite项目部署更加灵活和健壮。
以上就是如何在Vite中配置构建输出的公共基础路径的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534754.html
微信扫一扫 
支付宝扫一扫 
