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

优化Vue项目在非网站根目录部署的解决方案

对于需要在非网站根目录部署的Vue项目，长沙网络推广提供了一个绝佳的解决方案。对于生产部署项目，内外网的访问路径经常不同，内网可能基于域名根目录访问，而外网却指向一个子目录。例如，vue-router在history模式下，内网环境访问的是192.168.1.1:8080/index.html，而外网环境则是domain./ttsd/index.html。

由于客户可能不希望单独使用一个域名或子域来部署，因此需要对打包后的程序进行一些配置方面的修改。以下是详细的步骤：

一、修改配置文件

1. 修改打包后的资源引用为相对路径。找到config/index.js中的build属性下的assetsPublicPath，将其修改为'./'。原来的配置是'/'，这意味着资源引用是基于根路径的。

2. 修改样式引用的资源文件（如图片、视频、字体文件等）为相对路径。在build/utils.js中找到publicPath并修改为'../../'，以确保样式文件能够正确加载。

二、修改路由

在vue-router的history模式下，所有的路由都是基于根路径的。由于部署目录未知，我们可以通过获取当前访问的文件路径来修改路由。vue-router提供了一个base属性，可以根据应用的基路径进行修改。例如，如果整个单页应用服务在/app/下，那么base就应该设为"/app/"。修改路由代码，通过函数getAbsolutePath()获取当前路径，然后设置为路由的base属性。

三、修改nginx的配置

当项目部署在非根目录时，可能会出现一个问题：跳转到某个路由后，刷新页面会导致页面空白。这时需要修改nginx的配置。将try_files指令修改为正确的网站目录，例如/dist。这样，nginx就能正确地找到并加载打包后的项目文件。

以上就是关于如何优化Vue项目在非网站根目录部署的解决方案。希望这篇文章能为大家的学习和工作带来帮助，也希望大家能多多支持长沙网络推广和狼蚁SEO。在实际操作中，请根据具体情况进行相应的调整和优化。如有更多疑问或需求，欢迎进一步咨询和交流。