Vue应用部署至子目录后非根路由无法访问的问题排查咨询

这个问题我碰到过好几次，主要是两个核心配置没做好：Vue路由的基础路径设置冗余，加上Nginx没有处理history模式下的前端路由请求。下面一步步给你解决：

一、优化Vue路由配置，避免硬编码前缀 #

你现在在每个路由的path里都硬写了/deploypath，这其实没必要——Vue CLI的publicPath配置会自动注入process.env.BASE_URL变量，我们可以用Vue Router的base属性来自动匹配这个前缀，不用手动写在每个路由里：

修改你的路由文件index.js：

const routes = [
  {
    path: '/', // 去掉/deploypath前缀，对应部署后的/deploypath/路径
    name: 'feature1',
    component: FeatureOneView,
    meta: { title: 'Feature One' }
  },
  {
    path: '/notloggedin', // 对应部署后的/deploypath/notloggedin
    name: 'notloggedin',
    component: NotLoggedInView,
    meta: { title: 'Landing' }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL, // 自动匹配vue.config.js里的publicPath
  routes: routes
});

这样配置后，路由会自动根据环境拼接前缀，生产环境下所有路由都会带上/deploypath/，开发环境还是用/，既灵活又不容易出错。

二、修复Nginx的路由重写规则 #

这是最关键的一步！因为你用了Vue Router的history模式，直接访问/deploypath/notloggedin时，Nginx会误以为这是一个服务器上的物理路径，去寻找对应的文件，找不到就返回404。我们需要让Nginx把所有子目录下的请求都转发到Vue的index.html，由前端路由来处理：

打开你的Nginx站点配置文件（通常在/etc/nginx/sites-available/目录下，比如your-site.conf），添加或修改如下配置：

server {
    # 保留你原有的listen、server_name、ssl等配置

    location /deploypath/ {
        # 替换成你的Vue项目dist目录的绝对路径，比如/var/www/my-vue-app/dist
        root /path/to/your/vue/dist/folder;
        # 关键规则：先找静态文件，找不到就转发到index.html
        try_files $uri $uri/ /deploypath/index.html;
        index index.html;
    }
}

配置完后，重启Nginx让改动生效：

sudo systemctl restart nginx

最后验证 #

1. 重新构建Vue项目：npm run build
2. 把dist目录里的所有文件上传到Nginx配置的root目录下
3. 现在访问/deploypath/notloggedin，应该就能正常加载页面了

内容的提问来源于stack exchange，提问作者codr