Vue history 资源路径处理问题

缘由

• 使用Hash Mode开发的一套大系统，完全成型
• 由于各种跳转的问题，nginx的转发会导致#后面的路径丢失
• 想试试History Mode
• 环境 Vue-Cli 早期版本，webpack 2.6

相关配置

基础配置

• 将Vue Router mode设置为history,并将跳转路径中带#的hash路由改为history对应的方式
• webpack-dev-middleware 不带dev-server相关内容，只处理内容的映射,需要配合connect-history-api-fallback来做，默认给了一个默认的映射，但多级路由页面刷新还是会出现404

historyApiFallback日志

• 配置connect-history-api-fallback

  // handle fallback for HTML5 history http
  app.use(require('connect-history-api-fallback')({
       
      verbose:true  //开启日志信息
  }))
  

本地路由404

• 即使配置了这样