详解Vue项目编译后部署在非网站根目录的解决方案

Vue项目编译后部署在非网站根目录的解决方案 在开发Vue项目时，部署到非网站根目录是一个常见的问题。本文将介绍如何解决这个问题，包括修改配置文件、修改样式引用的资源文件、修改路由和修改nginx的配置。 修改配置文件 在部署Vue项目到非网站根目录时，需要修改配置文件，使得打包后的资源引用修改为相对路径。这可以在config/index.js文件中进行修改，将assetsPublicPath从'/'修改为'./'。 修改样式引用的资源文件 在build/utils.js文件中，需要修改样式引用的资源文件（图片、视频、字体文件等）为相对路径。这可以通过添加或修改publicPath为'../../'来实现。 修改路由 在路由的history模式下，所有的路由都是基于根路径的，如/xxxx，由于部署目录未知，所以可以根据location.pathname来获取到当前访问的文件路径，来修改路由。可以使用vue-router提供的base属性，例如，将base设为"/app/"，如果整个单页应用服务在/app/下。 修改nginx的配置 在部署到非网站根目录时，还需要修改nginx的配置。官方给的nginx配置是根目录下的，需要修改try_files $uri $uri/ /index.html;为try_files $uri $uri/ /dist/index.html;，其中/dist根据实际部署的网站目录进行修改。 通过以上修改，可以实现Vue项目编译后部署在非网站根目录的解决方案。同时，这些修改也可以应用于其他web项目的部署中。 小结 本文主要介绍了Vue项目编译后部署在非网站根目录的解决方案，包括修改配置文件、修改样式引用的资源文件、修改路由和修改nginx的配置。这些修改可以帮助开发者更好地部署Vue项目到非网站根目录，提高项目的灵活性和可维护性。