记录一次VUE项目路由去#

记录一次VUE项目路由去#

---

前言

有一个项目部署到测试环境地址需要去掉#，所以路由模式由默认的hash模式修改成为history模式

一、修改VUE路由配置

修改前：

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

修改后：

const createRouter = () => new Router({
  mode: 'history', 
  scrollBehavior: () => ({ y: 0 }),
  base: '/web/', //这里我加了页面访问的前缀
  routes: constantRoutes
})

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、页面刷新报404问题

1.使用nginx部署，刷新页面会报404

当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id。漂亮!
不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就丑了。
不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

2.服务器配置

我部署使用的是nginx部署的，所以我改了一段配置就解决了这个问题

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