Vue2和Vue3去掉URL路由中的'#'号——Nginx配置指南

在Vue.js应用中，路由系统默认使用HTML5的History模式，该模式会在URL中去除’#’号，使URL看起来更干净、更友好。然而，这种模式需要后端服务器的配合，因为当访问一个不存在的页面时，服务器需要返回一个特定的index.html文件，以便Vue.js可以接管并处理路由。

对于使用Nginx作为服务器的Vue.js项目，下面是如何配置Nginx以支持Vue.js的History模式的步骤。

步骤1: 配置Nginx以支持History模式

首先，打开你的Nginx配置文件（通常位于/etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf）。然后，找到你的server块，并添加以下location块：

server {
    listen 80;
    server_name your_domain.com;
    location / {
        root /path/to/your/vue/project/dist;
        try_files $uri $uri/ /index.html;
    }
}

这里的关键是try_files指令，它会尝试按以下顺序提供文件：

1. 请求的URI（例如/about）
2. 请求的URI后面跟着一个’/‘（例如/about/）
3. 如果上述都不存在，则提供index.html文件

这样，无论用户访问什么URL，Nginx都会返回index.html文件，然后Vue.js的路由系统会接管并显示正确的页面。

步骤2: 在Vue项目中启用History模式

对于Vue2，你需要在router/index.js文件中配置mode: 'history'，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    // your routes here
  ]
})

对于Vue3，配置方式相同。确保你的路由配置文件中启用了history模式。

步骤3: 重新加载Nginx配置

保存并关闭Nginx配置文件后，使用以下命令重新加载Nginx配置：

sudo nginx -s reload

现在，你的Vue.js应用应该能够处理没有’#’号的URL了。

注意事项

• 确保你的Nginx配置文件中没有其他可能会干扰路由设置的location块。
• 如果你使用了其他的反向代理或服务器配置，请确保它们也支持History模式。
• 在生产环境中部署时，请确保你的Vue.js应用已经被正确地构建（例如使用vue-cli-service build命令），并且所有静态资源（如CSS、JS文件）都被正确地引用。

遵循这些步骤，你应该能够成功地在Vue2和Vue3项目中去掉URL路由中的’#’号，从而获得更美观和SEO友好的URL。