vue本地history 刷新后页面空白问题

最新推荐文章于 2025-01-02 11:33:06 发布

原创最新推荐文章于 2025-01-02 11:33:06 发布 · 686 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在Vue项目的开发环境中，将原本基于hash的路由修改为history模式，并设置了publicPath为/以适配不同服务器。同时，通过devServer的proxy配置，将所有请求代理到http://localhost:3000。特别地，当请求类型为HTML时，使用bypass函数实现重定向至/index.html，确保单页应用的正常运行。

修改hash为history
在这里插入图片描述

添加 publicPath: '/',
在这里插入图片描述
项目是调了不同得服务器所以做了代理

module.exports = {
  //...
  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:3000',
        // 只需要添加该方法，然后当请求的是html，则重定向到index.html
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    },
  },
};