如何在 Vue.js 中去掉 URL 路由中的 # 号以及Nginx相关配置详解

         在使用 Vue.js 的单页面应用（SPA）时，默认情况下，Vue Router 会使用 hash 模式来管理路由，这会在 URL 中生成一个 # 号。虽然 hash 模式可以避免服务器端的配置问题，但在某些情况下，我们希望去掉这个 # 号，使 URL 更加美观和友好。本文将详细介绍如何通过配置 Vue Router 和 Nginx 来实现这一目标。

1. 修改 Vue Router 配置

首先，我们需要将 Vue Router 的模式从 hash 改为 history。在你的 Vue Router 配置文件中，进行如下修改：

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

Vue.use(Router);

export default new Router({
  mode: 'history', // 将 mode 设置为 'history'
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

2. 配置 Nginx

接下来，我们需要在 Nginx 配置文件中添加一些规则，以确保所有请求都能正确地指向你的前端应用。以下是一个示例配置：

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    root /path/to/your/dist; # 你的 Vue 项目构建后的 dist 目录路径
    try_files $uri $uri/ /index.html; # 这行是关键，确保所有请求都指向 index.html
  }

  # 其他配置项
}

3. 重启 Nginx

保存配置文件后，重启 Nginx 以使配置生效：

sudo systemctl restart nginx

4. 测试

最后，访问应用，检查 URL 中是否已经没有 # 号了。如果一切正常，应该能够看到应用已经在 history 模式下正常工作。

详细解释

1. 修改 Vue Router 配置

• mode: ‘history’：将路由模式设置为 history，这样 URL 中就不会出现 # 号。
• routes：定义你的路由规则，每个路由对应一个组件。

2. 配置 Nginx

• listen 80：监听 80 端口，这是 HTTP 的默认端口。
• server_name yourdomain.com：指定你的域名。
• location /：匹配所有请求。
• root /path/to/your/dist：指定你的 Vue 项目构建后的 dist 目录路径。
• try_files $uri $uri/ /index.html：这是关键配置，确保所有请求都指向 index.html，从而让 Vue Router 处理路由。

3. 重启 Nginx

• sudo systemctl restart nginx：重启 Nginx 服务，使新的配置生效。

总结

通过以上步骤，可以成功去掉 Vue 应用中的 # 号，并确保 Nginx 能够正确处理所有路由请求。这种方式不仅使 URL 更加美观，还提高了用户体验。希望本文对你有所帮助！

如果你有任何问题或需要进一步的帮助，请随时联系我。