vue项目的history模式

最近使用vue做的大屏看板项目碰到的路由问题，在此记录一下。

Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，开发的单页应用的URL都会带有#号，不美观，用户不能接受且在某些场景中因为#号链接会被扰乱。【例如：微信页面开发中凡是涉及充值的页面，不能做成带hash路由的的页面】。当你使用 history 模式时，URL 就像正常的 url，看起来也非常美观。不过这种模式要玩好，还需要后台配置支持。

 

问题：

开发环境下，路由不管选用hash模式还是history模式都不会出问题，但打包后放在服务器上history模式会出现页面一片空白的情况,而且没有资源加载错误的报错信息.。

 

原因：

1、后台配置支持是否支持：history模式要玩好，是需要后台配置支持的。原理是要在服务端增加一个覆盖你的路由内所有情况的候选资源，如果 URL 匹配不到任何候选资源，则定位到打包好的 index.html 页面，这个页面就是你 app 依赖的页面。配置链接：https://router.vuejs.org/zh/guide/essentials/history-mode.html

2、前端没有配置好，配置可以按照下面的步骤：

|--router/index.js

const router = new VueRouter({
  mode: 'history',
  base: ‘/WebTest/Vue/bigscreen/dist’,
  routes
})


mode配置成hostory
如果项目代码直接放在服务器的根目录, 那么是没有问题的,base不需要配置。
如果项目代码是放在服务器的子目录,需要加一个base配置项，里面配置项目代码在服务器内的路径。【我的代码放在/WebTest/Vue/bigscreen】

|--vue.config.js

module.exports = {
  //  基本路径
  publicPath: "./",

  //  构建时的输出目录
  outputDir: "dist",

  //  放置静态资源的目录
  assetsDir: "static",
}