【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/',  
  ...... 
}