DEV Community
·
如何在公共_html的子目录中正确托管Vue.js应用
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
在公共_html子目录中部署Vue.js应用时，需要配置基础路径、Vue Router和服务器设置。确保在vite.config.js或vue.config.js中设置正确的子目录路径，并通过.htaccess处理路由。完成后，构建并上传dist文件夹内容，清除缓存后测试应用。
🎯
关键要点
- 在公共_html子目录中部署Vue.js应用时，可能会遇到空白页面、缺失资源或路由失败的问题。
- Vue默认假设应用托管在域的根目录，需要在子目录中部署时正确设置路径。
- 第一步：在vite.config.js或vue.config.js中设置正确的基础路径。
- 第二步：如果使用Vue Router，更新基础选项以匹配子目录。
- 第三步：为Apache配置.htaccess文件，以正确处理Vue的历史模式路由。
- 第四步：构建并上传dist文件夹内容，确保不上传dist文件夹本身。
- 第五步：清除浏览器缓存并测试应用，确保一切正常加载。
- 确保检查vite.config.js或vue.config.js、路由设置和.htaccess文件以解决可能的问题。
❓
延伸问答
如何在公共_html的子目录中部署Vue.js应用？
需要设置正确的基础路径、Vue Router和服务器配置，具体步骤包括修改vite.config.js或vue.config.js，配置.htaccess文件，构建并上传dist文件夹内容，最后清除缓存测试应用。
在部署Vue.js应用时，为什么会出现空白页面或缺失资源的问题？
因为Vue默认假设应用托管在域的根目录，若在子目录中部署而未正确设置路径，可能导致资源路径错误，从而出现空白页面或缺失资源。
如何配置vite.config.js以适应子目录部署？
在vite.config.js中设置base选项为'/subdirectory/'，确保所有资源路径相对于子目录生成。
如果使用Vue Router，如何更新基础选项？
在router的配置文件中，将createWebHistory的参数设置为'/subdirectory/'，以匹配子目录。
如何为Apache配置.htaccess文件以支持Vue的历史模式路由？
在子目录中创建.htaccess文件，添加重写规则，确保所有请求都指向index.html，以便Vue Router处理导航。
部署完成后，如何测试Vue.js应用是否正常加载？
清除浏览器缓存或使用隐身窗口访问网站，检查浏览器控制台和网络标签以确认所有资源是否正常加载。
➡️
