做毕设遇到的问题:部署到服务器访问时无一刷新页面就404

最新推荐文章于 2023-10-03 12:39:30 发布

小杨不爱写代码

最新推荐文章于 2023-10-03 12:39:30 发布

阅读量109

点赞数

文章标签：服务器课程设计 vue 前端

本文链接：https://blog.csdn.net/weixin_52221334/article/details/129619604

版权

在Vue2项目中，默认的router模式为hash，URL显示带有#。切换到history模式可以去掉#，但需要服务器配置支持。在宝塔面板部署时，仅更改router配置可能不足以实现无#URL，可能还需调整服务器配置。

摘要由CSDN通过智能技术生成

这个问题跟你部署方式有关，看了这个说明就懂了

vue2项目中router配置说明

router官网介绍如下：

类型: string
- 默认值: “hash” (浏览器环境) | “abstract” (Node.js 环境)
- 可选值: “hash” | “history” | “abstract”
配置路由模式:
- hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
- history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式.
- abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。

router默认使用“hash”,所以设置与否浏览器的URL显示像这样(http://localhost:8000/#/firsts/first ),
mode设置为"history"时，浏览器URL显示为(http://localhost:8000/firsts/first),设置“history”后链接中没有#

上配置。这是我自己的

const router = new VueRouter({
  //mode: 'hash',
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {path: '/login', name: 'Login', component: Login, title: '登录页'}
  ]
})

宝塔面板部署到浏览器的配置
在这里插入图片描述
其他地方都没加