nginx 将hash路由变为history路由

要将hash路由变为history路由，需要进行以下步骤：

1. 在nginx配置文件中添加以下代码：

location / {
    try_files $uri $uri/ /index.html;
}

这将重写所有请求到index.html文件。

2. 在Vue Router中设置history模式：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

3. 在Vue项目中使用相对路径。

例如，如果你的项目在example.com/my-app/目录下，则需要将所有的url路径都加上/my-app/前缀。

这样就可以将hash路由变为history路由了。

相关问题

vue 路由history模式 项目打包刷新后出现404 apache、nginx环境，如何解决

在 Vue 路由的 history 模式下，刷新页面会导致 404 错误的出现，这是因为浏览器会向服务器发送请求，但服务器并没有对应的路由，因此就会返回 404 错误。解决这个问题的方法有两种：

1. 配置后端服务器

如果你的 Vue 项目部署在 Apache 或 Nginx 等 Web 服务器上，你可以配置服务器来处理这个问题。具体做法是，在服务器上配置一个重定向规则，将所有的 URL 请求都重定向到 index.html 文件上。以 Apache 服务器为例，可以在 Apache 的配置文件（如 httpd.conf）中添加以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

这个配置将所有的 URL 请求都重定向到 index.html 文件上，这样即使刷新页面，服务器也会返回正确的内容。

2. 使用 hash 模式

如果你不想在服务器上配置重定向规则，你可以考虑使用 hash 模式。在 hash 模式下，Vue 会使用 URL 中的 # 符号来表示路由，这样即使刷新页面，浏览器也只会重新加载 index.html 文件，而不会向服务器发送请求。要启用 hash 模式，只需要在 Vue 路由的配置中添加以下代码：

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

这样就可以启用 hash 模式了。需要注意的是，hash 模式下，URL 中的 # 符号后面的内容不会被发送到服务器，因此你需要在前端代码中使用 JavaScript 来解析 URL 中的 hash 值，并根据这个值来渲染不同的页面。

Vue2 hash模式改为history模式

要将 Vue2 的路由模式从 hash 模式改为 history 模式，需要进行以下步骤：

1. 在 Vue Router 中配置 mode 为 'history'，如下所示：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2. 在服务端配置，以确保在用户直接访问子路由时，能够正确地返回 index.html 文件。对于 Nginx 服务器，可以添加以下配置：

location / {
  try_files $uri $uri/ /index.html;
}

3. 在开发环境中，如果使用了 Vue CLI，可以在 vue.config.js 文件中设置 devServer 的 historyApiFallback 选项：

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

这些步骤应该就能够成功地将 Vue2 的路由模式从 hash 模式改为 history 模式了。