DEV Community
·
如何在公共_html的子目录中正确托管Vue.js应用
内容提要
在公共_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文件以解决可能的问题。
延伸解读
基础路径的重要性
在部署Vue.js应用时，基础路径的设置至关重要。默认情况下，Vue假设应用托管在根目录，因此在子目录中部署时，必须在vite.config.js或vue.config.js中正确配置基础路径，以确保所有资源和路由能够正确加载。
Vue Router的配置
如果使用Vue Router，确保其基础选项与子目录一致。这一设置可以避免路由失败的问题，确保用户在访问不同页面时不会遇到404错误。正确的配置是成功部署的关键。
Apache服务器的.htaccess配置
对于使用Apache服务器的用户，.htaccess文件的配置是处理Vue历史模式路由的必要步骤。通过正确的重写规则，可以确保所有请求都指向index.html，从而让Vue Router正常工作。
延伸问答
如何在公共_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应用是否正常加载？
清除浏览器缓存或使用隐身窗口访问网站，检查浏览器控制台和网络标签以确认所有资源是否正常加载。
