vue项目刷新页面报404

今天突然想到之前遇到的一个问题，使用vuecli3.0创建的vue项目，刷新页面报404。

原因：

hash —— 即地址栏 URL 中的 # 符号。比如这个 URL：http://www.abc.com/#/hello hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。（仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误）原链接

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。（但因为vue应用是一个单页客户端应用，如果后台没有正确的配置，直接访问http://www.abc.com/hello/id就会返回404）

解决方式：

1）直接修改vueRouter的模式，将其改为hash

export default new Router({      mode: 'hash',      base: process.env.BASE_URL,  })

2）模式仍为history，但是需要后台配置nginx

推荐参考的nginx配置链接：https://blog.csdn.net/weixin_38023551/article/details/88640939

在前端主要注意两个地方需要与配置的二级域名一致：

这个配置是针对Vue CLI 3.3 以上版本，上边链接里的针对的是之前的版本

假如你配置的二级域名为 /student/

export default new Router({      mode: 'hash',      base: '/student/', //这里需要一致  })

module.exports = {      publicPath: process.env.NODE_ENV === 'production' ? './' : '/' //用于放置生成的静态资源     (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）      assetsDir: '/student/', //这里需要一致  };

推荐关于vue.config,js进行配置的文档：https://blog.csdn.net/u012302552/article/details/81742907