vue-router+nginx 非根路径配置方法

在使用 Vue Router 时，如果我们的应用需要在部署时不是根路径，而是一个非根路径下运行，可以通过以下步骤进行配置。

首先，在项目的 `vue.config.js` 文件中进行配置。如果没有该文件，可以在项目根目录下创建，并添加以下内容：

module.exports = {
  publicPath: '/your-sub-path-name/' // 替换为你的非根路径名称
}

然后，在使用 Vue Router 的时候，需要修改路由配置。假设我们有一个路由配置文件 `routes.js`，其中定义了路由路径：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: '/your-sub-path-name/', // 替换为你的非根路径名称
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    // 其他路由配置
  ]
})

在这个例子中，我们使用了 `base` 字段来指定非根路径的名称。这会告诉 Vue Router 在生成路由链接时，在路径前面添加正确的路径前缀。

接下来，我们需要配置 Nginx 服务器来支持非根路径。打开 Nginx 配置文件，一般是 `/etc/nginx/nginx.conf` 或 `/etc/nginx/conf.d/default.conf`，找到 `location` 配置部分，添加以下内容：

location /your-sub-path-name/ {  # 替换为你的非根路径名称
  alias /your-project-path/dist/;  # 替换为你的项目部署路径，注意最后的斜杠
  try_files $uri $uri/ /your-sub-path-name/index.html;  # 替换为你的非根路径名称
}

在这个例子中，我们使用了 `alias` 字段来指定项目所在的路径，`try_files` 字段用于处理路由重定向，确保正确的路由能被找到。

最后，重新启动 Nginx 服务器，让配置生效。

这样，我们就成功地配置了 Vue Router 和 Nginx 来支持非根路径了。现在我们的应用可以在非根路径下运行了。记得根据实际情况替换配置中的相应字段。