vue的路由去掉#，哈希变成history

问题遇到的现象和发生背景

vue3，url去掉#，变成url:localhost:8080/pages/home/home
router的mode变成history

用代码块功能插入代码，请勿粘贴截图

router/index.js

import Vue from 'vue'
import VueRouter  from 'vue-router'
import App from '@/App.vue'
import { createRouter, createWebHistory,RouteRecordRaw } from 'vue-router'
Vue.use(VueRouter)


// 定义一些路由
// 每个路由都需要映射一个组件
const routes  = [{
    path: '/home',
    component: () => import('../pages/home/home.vue'),    
}]


// 1.创建路由对象
const router = new VueRouter({
    // history:createWebHistory(process.env.BASE_URL),
    mode:"history",
    
    routes
     
})

 
// 4.暴露
export default router

main.js

//引入路由模块
import router from '@/router/index.js'
new Vue({
  router,
  render: h => h(App),
}).$mount()

运行结果及报错内容

报错

我的解答思路和尝试过的方法

router/index.js中
const router = new VueRouter({
mode:"history",
routes
})
不报错，但是输入没有#的地址是空白的

const router = new VueRouter({
history:createWebHistory(process.env.BASE_URL),
routes
})
报错：UncaughtTypeError: (0 , _vueRouter.createWebHistory) is not a function

我想要达到的结果

想实现url中去掉#；也就是mode：hash 变成 mode:history 可以成功跳转

const createRouter = () =>
  new Router({
    mode: 'history', // require service support
    routes: constantRoutes //路由表
  })

const router = createRouter()
export default router

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：vue路由，history模式的原理

Vue3这样写的const router = createRouter({
history: createWebHistory(),
routes
})