富有活力且易于使用的Vue框架是开发现代Web应用程序的首选。然而，在配置Vue子目录时，很容易遇到各种问题。本文将分享如何避免在nginx配置Vue子目录时常见的坑。

问题一：刷新页面404

在使用Vue项目时，刷新页面会遇到404错误。这是因为不同于后端框架，Vue是前端路由导致的。要解决这个问题，我们需要在nginx的配置文件中添加一个location规则，将所有请求重定向到index.html：

location / {    try_files $uri $uri/ /index.html;}

问题二：打包后资源加载失败

在Vue项目中，当我们部署在子目录下时，经常会遇到资源加载失败的问题。这是因为资源请求路径不正确。通过在Vue的配置文件中设置publicPath来解决此问题：

module.exports = {    publicPath: '/subdirectory/',    //其他配置项...}

问题三：路由跳转异常

在Vue项目中，点击路由链接后可能会出现跳转失败、页面样式错乱等问题。这是因为路由的基路径没有正确设置。我们需要修改Vue的路由配置文件，将base属性设置为子目录路径：

const router = new VueRouter({    base: 'subdirectory',    //其他配置项...})

问题四：路由刷新404

在配置子目录后，刷新路由页面可能会返回404错误。解决办法是使用nginx的URL重写功能，添加一个新的location规则：

location /subdirectory/ {    try_files $uri $uri/ /subdirectory/index.html;}

问题五：域名转发和HTTP/HTTPS混用问题

如果你的域名下同时存在HTTP和HTTPS链接，可能会导致混用错误。要解决这个问题，我们需要配置一个新的server规则，根据请求的$scheme值进行转发：

server {    listen 80;    server_name example.com;        if ($scheme = http) {        return 301 https://$host$request_uri;    }        location /subdirectory/ {        proxy_pass http://localhost:8080/subdirectory/;    }}

通过避免上述常见问题的方法和解决方案，我们能够配置Vue子目录并成功运行Vue应用程序。