vue项目改用history模式,本地刷新报错是为何?

1,639 阅读1分钟

报错类型 Whitelabel Error Page

image.png

原因

是因为使用了history模式和vue.config.js中的代理导致

  new Router({
    mode: 'history', // require service support
    base: '/part_security/',
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  })

说明承载web服务的不是webpack-dev-server,而且java了。检查下webpackproxy`配置是否把页面请转发到服务器上

 proxy: {
      '/': {
        target: 'http://172.16.4.156:8000', // 日超
        ws: false, // 代理的WebSockets
        changeOrigin: true, // 需要虚拟主机站点
        pathRewrite: {
          '^/': '/'
        }
      }
    }

解决方案

给.env.development文件中就是环境配置添加一个前缀,同时在webpack-dev-server的代理中去除这个前缀防止请求路径不对

image.png

企业微信截图_16430089485784.png