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

Vue项目子目录部署指南：生动实践教程

对于基于.vue单文件格式的Vue项目，我们常常需要将它们部署到服务器的子目录中，特别是在微信公众号等只有一个域名的情况下。本文将为你详细介绍使用Poi作为前端项目管理工具的Vue项目如何部署到子目录。

Poi是一个无需构建配置的web开发工具，它通过简洁的方式管理你的前端项目，让开发者无需关注繁琐的配置细节。即使不使用webpack，你仍然可以通过Poi轻松管理你的Vue项目。

当你需要将Vue项目打包到子目录时，以下步骤将帮助你实现这一目标：

一、设置homePage为子目录

这是子目录部署的第一步。在poi的配置中，确保你的homePage指向子目录。

二、调整资源路径

修改index.html中的资源链接，确保它们指向子目录。确保CSS文件中的资源路径为相对路径。

三、修改vueRouter的base

在Vue的路由配置中，设置base选项为子目录，以确保路由的正确性。

四、执行打包命令

运行`npm run dev`或`npm run dist`来打包你的项目。观察打包后的index.html、css文件等，确保它们都在正确的子目录下。

五、配置nginx到二级目录

配置nginx以将请求路由到正确的子目录。例如：

```nginx

location /ticket {

alias /root/java/ticket/dist/;

try_files $uri $uri/ @rewrites;

}

location @rewrites {

rewrite ^/(ticket|sign|reimburse)/(.+)$ /$1/index.html last;

}

```

请注意，这里的`$1`对应URL中的子目录部分（如ticket）。如果你有多个子目录项目，需要适当修改rewrite规则。对于单个子目录，使用`^/(.+)$`来匹配所有子目录。确保把子目录名包含在rewrite规则中。

完成以上步骤后，你的Vue项目已成功部署到服务器的子目录。如果遇到任何问题，请检查配置和路径是否正确。希望本文能帮助你顺利完成Vue项目的子目录部署！