【vue-router】history模式 前端配置，解决刷新出404问题

hash：在地址栏中显示"#"符号（localhost:8080/#/home）它的特点在于：hash虽然出现在路径中，但是不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

history利用了H5 history Interface中新增的pushState()和replaceState()方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的Url，但是浏览器不会立即向后端发送请求。

hash模式和history模式都属于浏览器自身的特性，Vue-Router只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。
为了使路径更加直观及美观，就需要使用history模式。只需在配置router的配置文件中加入 mode:“history”

服务器端配置（nodejs）：

//导入处理history模式的模块
const history=require('conent-history-api-dallback')
//注册处理history模式的中间件
app.use(history())

前端配置：

//首先要设置路由的mode和base
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
// 如果使用history模式，必须设置base参数
routes
});
export default router;
其次要设置vue.config.js里的publicPath，如下：
module.exports = {
// publicPath默认值是'/'，即你的应用是被部署在一个域名的根路径上
// 设置为'./'，可以避免打包后的静态页面空白
// 当在非本地环境时，这里以项目test-daily为例，即打包后的h5项目部署服务器的test-daily目录下
// 那么这里就要把publicPath设置为/test-daily/，表示所有的静态资源都在/test-daily/里
// 打包部署后，会发现index.html引用的静态资源都添加了路径/test-daily/
publicPath: process.env.NODE_ENV == 'development' ? './' : '/test-daily/',
......
}

最后

以上就是高贵往事为你收集整理的【vue-router】history模式 前端配置，解决刷新出404问题的全部内容，希望文章能够帮你解决【vue-router】history模式 前端配置，解决刷新出404问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。