Vue项目服务器部署的子目录部署方法

Vue项目，尤其是基于。vue单文件格式，被构建成js文件后发布到服务器，一般通过nginx反向代理发送到文件目录后直接访问。但由于很多情况下无法使用更多的子域(例如微信微信官方账号只能有一个域名)，因此迫切需要将服务器部署到子目录中。该经验以一个成功的系统部署为例，说明如何通过子目录部署Vue项目。

首先，我们介绍Poi。我们的项目不使用网络包进行前端项目管理，而是使用兴趣点进行管理：开发网络应用程序，无需构建配置，直到您需要。也就是说，Poi封装了webpack，0配置开发Web应用。可以使用poi.config.js文件配置poi配置，也可以直接在package.json中配置

执行npm run dev相当于执行poi，执行npm run dist相当于执行poi构建。打包poi构建后，静态目录中的资源将被复制到dist目录，其他js和css将被自动压缩到。js和。并注入index.html。

如果poi项目需要打包到子目录中，必须将homePage设置为子目录。这是第一步

其次，index.html其他非Vue部分的资源必须加上子目录前缀，包括网站的图标。

第三步是确保Css文件中的资源路径是相对路径。

第四步是将vueRouter中的base更改为子目录。

然后执行npm运行开发，也就是npm构建。观察打包的index.html、css文件等。

然后将nginx配置到辅助目录：

位置/票证{ alias/root/Java/ticket/dist/；try _ files $ uri $ uri/@重写；} location @重写{重写^/(ticket|sign|reimburse)/(.)$ /$1/index.html最后；}这里$1对应的是url中的票证，因为这里有很多共享重写的项，所以有三个逻辑OR。如果只有一个子目录，则使用/(ticket)/(然后将nginx配置到辅助目录：location/ticket { alias/root/Java ^/(ticket)/dist/；try _ files $ uri $ uri/@重写；} location @重写{重写^/(ticket|sign|reimburse)/(.)$ /$1/index.html最后；}这里$1对应于url中的票证。因为这里有很多共享重写的项，所以有三个项在逻辑上是OR。如果只有一个子目录，请使用/(ticket)/(。) $.记得在这里扩展票证。

记得在这里扩展票证。

项目部署成功！