Vue - history模式上线后页面空白以及404

以下代码基于vue-cli构建的项目

1.修改路由文件

mode: 'history'

base填写打包文件(index.html和static文件夹)放置的目录路径

例如我的项目放置在(https://www.abc.com/draw/h5/)下，则base: /draw/h5/

export default new Router({
  mode: 'history',
  base: '/draw/h5/',
  
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {title: '首页'}
    }
  ]
})

2.修改config/index.js 文件

将assetsPublicPath: '/'     修改成assetsPublicPath: './'

3.关于上线后的访问路径

hash模式下访问路径：https://www.abc.com/draw/h5/index.html

history模式下访问路径：https://www.abc.com/draw/h5/

4.需要后台协助配置两个地方

1.按官网配置

https://router.vuejs.org/zh-cn/essentials/history-mode.html

2.404 配置 （参考博客）

https://blog.youkuaiyun.com/u011025083/article/details/80352301

https://www.cnblogs.com/goloving/p/9170508.html

5.关于使用history模式

hash模式的url带有#号，而在做微信公众号微信支付的时候，商户平台配置了含#号的url，前端仍然报错（提示该url路径未配置），所以项目改成history模式避免了这个问题