nginx配置中关于try_file的一些问题

1.出现的问题

在前后端项目都部署完成后，项目后端项目正常，前端项目中的路由如下：

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

Vue.use(Router);

const router = new Router({
  mode: 'history',
  base: '/bohweb', // 添加基础路径
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 其他路由定义...
  ]
});

export default router;

由于前端在路由中配置了base这个属性，所以在nginx在配置的时候，就不能用以往的location / {…} 来配置了，这个时候，前端需要用location /bohweb {…} 来配置文件，这样的话，才能够正常访问前段vue项目打成的包。
但是此时的try_file 配置如下

 location /bohweb {
   
                add_header Access-Control-Allow-Origin *;
                alias /opt/applications/mobile-boh/boh-web/;
                index index.html;
                try_files $uri $uri/ /index.html;
        }

此时配置了之后，重启nginx，页面能够正常访问。
但是！问题来了，刷新页面的时候，页面并不能正常加载vue打包后的页面和css，js文件，页面显示空白，于是就仔细研究了下这个try_file的配置。

2.解决方案

在try_file的/index前缀加上/bohweb

try_file $uri $uri/ /bohweb/index.html

加上

3.为什么这么解决

3.1.try_file后面跟的路径是什么意思

在这段Nginx配置中，try_files指令用于定义当请求的文件或目录不存在时，Nginx应该尝试哪些文件或路径。它的语法是try_files file ...，其中file是要尝试的文件路径。如果请求的文件或目录存在，则Nginx会将请求交给该文件处理，否则它将按照指定的顺序尝试后续的文件路径。

在这个特定的配置中，try_files $uri $uri/ /bohweb/index.html的含义如下：

1. $uri：这个变量代表当前请求的URI路径。首先，Nginx会尝试匹配这个路径对应的文件。如果存在该文件，Nginx将直接返回该文件。
2. $uri/：这个变量表示当前请求的URI路径加上一个斜杠，用于尝试匹配一个目录。如果存在与该目录对应的index文件（在这里是index.html），Nginx会返回该文件。
3. /bohweb/index.html：如果前面的两个尝试都失败，Nginx会尝试返回/bohweb/index.html文件。这是一个具体的文件路径，当其他路径都无法匹配时，Nginx会返回该文件作为默认的处理结果。

这种配置在搭配Vue的历史模式时非常有用。Vue的历史模式使用HTML5的history API来管理路由，它允许使用者创建具有美观URL的单页应用程序。然而，当用户刷新页面或直接访问一个特定路由时，服务器需要正确地处理这些路由并返回正确的文件。

通过配置try_files $uri $uri/ /bohweb/index.html，Nginx会首先尝试匹配请求的路径对应的文件，如果不存在，则尝试匹配目录，最后如果都失败，返回/bohweb/index.html作为默认文件。这样做的目的是确保在历史模式下，无论用户直接访问哪个页面或刷新页面，服务器都能返回Vue应用的入口文件index.html，从而保证应用的正常运行。最后的/bohweb是为了匹配前面的alias指令中的路径，以确保正确的文件被返回。

3.2.try_file中为什么加上/bohweb

如果你不配置/bohweb，当你刷新页面时，可能会遇到找不到JavaScript和CSS文件的问题。这是因为在Vue的历史模式中，当你使用美观的URL路径时（如example.com/my-page），实际上这些路径并不是实际存在的文件路径，而是由前端路由处理的。

当你刷新页面时，浏览器会向服务器发送请求，希望获取对应路径的文件。但由于这些路径并不对应实际的文件，服务器会返回404错误，表示文件不存在。

为了解决这个问题，通常需要在服务器配置中添加一个处理规则，将所有请求重定向到Vue应用的入口文件（通常是index.html），然后由前端路由来处理这些路径。这就是为什么需要配置try_files指令，以便在找不到具体文件时返回index.html。

在你的配置中，/bohweb实际上是一个别名（alias），指向Vue应用的根目录，它确保Nginx能够正确地找到index.html文件并返回它作为默认文件。如果你不配置/bohweb，那么Nginx将无法找到正确的文件路径，并且可能会返回404错误。

因此，为了确保在刷新页面时能够正确加载JavaScript和CSS文件，你需要配置正确的别名路径（例如/bohweb），以便Nginx能够正确定位到Vue应用的入口文件，并返回它作为默认文件。

3.3.那如果nginx需要配置/bohweb，前端vue项目需要在哪边配上这个前缀呢

如果你在Nginx配置中添加了/bohweb作为别名（alias），那么前端Vue项目也需要在相应的地方配置这个前缀，以确保正确的路径匹配。

在Vue项目中，你可以使用Vue Router来配置前端路由，并在路由定义中添加一个基础路径（base URL）来指定前端路由的根路径。这个基础路径应该与Nginx中配置的别名（alias）保持一致，即/bohweb。

你可以在Vue项目的路由配置文件（通常是router/index.js）中添加基础路径，示例如下：

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

Vue.use(Router);

const router = new Router({
   
  mode: 'history',
  base: '/bohweb', // 添加基础路径
  routes: [
    {
   
      path: '/',
      name: 'Home',
      component: Home
    },
    // 其他路由定义...
  ]
});

export default router;

在上述示例中，base: '/bohweb'指定了基础路径为/bohweb，这与Nginx中的配置保持一致。这样，在Vue应用中生成的路由路径就会自动添加这个前缀，确保与Nginx配置中的别名匹配。

例如，如果你有一个名为About.vue的组件，在使用<router-link>或router.push时，Vue Router 将自动为其生成路径/bohweb/about。

通过在Vue项目的路由配置中设置基础路径，你就可以确保前端路由与Nginx的配置相匹配，并且在刷新页面或直接访问特定路由时，Nginx能够正确地返回Vue应用的入口文件，并且前端路由能够正确地处理这些路径。