如何在已生成的Vue项目中用Vue Router去除URL中的#符号

已创建完成的Vue项目完全可以直接切换为history模式，不需要重新初始化项目，按照以下步骤操作即可。

操作步骤 #

1. 修改路由配置文件 #

根据你使用的Vue Router版本调整配置：

• Vue Router 4（适配Vue3）：将路由创建时的createWebHashHistory方法替换为createWebHistory

  // router/index.js 修改示例
  // 原有哈希模式写法
  import { createRouter, createWebHashHistory } from 'vue-router'
  
  const router = createRouter({
    history: createWebHashHistory(),
    routes: [/* 你的路由规则 */]
  })
  
  // 修改为history模式后的写法
  import { createRouter, createWebHistory } from 'vue-router'
  
  const router = createRouter({
    history: createWebHistory(process.env.BASE_URL), // 传入项目公共基础路径
    routes: [/* 你的路由规则 */]
  })
  

• Vue Router 3（适配Vue2）：在路由实例配置中新增mode: 'history'属性

  // router/index.js 修改示例
  // 原有哈希模式写法
  const router = new VueRouter({
    routes: [/* 你的路由规则 */]
  })
  
  // 修改为history模式后的写法
  const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [/* 你的路由规则 */]
  })
  

2. 配置本地开发服务 #

避免开发环境下刷新页面出现404问题：

• 基于Vue CLI创建的项目，在vue.config.js中添加如下配置：

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

• 基于Vite创建的项目，在vite.config.js中添加如下配置：

  export default {
    server: {
      historyApiFallback: true
    }
  }
  

3. 配置生产环境服务 #

History模式需要服务端额外配置，否则用户直接访问子路径或者刷新页面会出现404：

• Nginx服务器配置示例：

  server {
    listen 80;
    server_name 你的域名;
    root 项目dist文件夹的绝对路径;
  
    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>
  

注意事项 #

• 如果项目部署在域名的子路径下，需要在创建history实例时传入对应的base路径，比如部署在https://example.com/admin/，base参数就填写/admin/
• 项目内静态资源建议使用相对路径引用，避免部署后出现资源加载失败的问题
• 切换模式后原有的带#的哈希链接会自动适配到无#的路径，不会影响存量用户访问

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