如何去除Vue项目URL中的/#/前缀 vue-router配置调整方法

你当前的路由使用的是Hash模式，该模式通过URL的hash段实现前端路由跳转，不会触发页面重载，因此会自带/#/前缀。只需切换为HTML5 History模式即可去掉该前缀，具体操作如下：

1. 修改路由配置 #

第一步修改导入的路由模式方法：

// 原代码
import { createRouter, createWebHashHistory } from 'vue-router'
// 修改后代码
import { createRouter, createWebHistory } from 'vue-router'

第二步修改路由实例的history配置项：

// 原代码
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
// 修改后代码
const router = createRouter({
  history: createWebHistory(),
  routes
})

修改完成后重启本地开发服务，即可看到URL的/#/前缀已经被移除。

2. 生产部署适配 #

History模式需要服务端额外配置 fallback 规则，否则用户直接访问子路由、或者刷新子路由页面时会出现404错误，常见服务端配置如下：

• Nginx 配置（对应站点server块内添加规则）：

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

• Apache 配置（项目根目录新建.htaccess文件写入以下规则）：

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

内容的提问来源于stack exchange，提问作者Maicol Rojas