在vue的开发环境和生产环境如何配置webpack让其支持vue-router的history路由模式

如果在vue的项目中使用history的路由模式,当页面跳转到子路由后,如果此时刷新页面会报404,这时会影响开发模式下的开发体验,此时可以通过配置,

一.开发环境

1.vue-cli3的项目

• 可以修改vue.config.js中的devserevr选项

  devServer: {
    port: 9000,
    proxy: {
      '/': {    //关注点
        target: 'http://122.51.211.208:9000',
        ws: true,
        changeOrigin: true
      }
    },
    historyApiFallback: true
  }

但是需要注意此时如果使用代理的话,将会返回500,因为我们将整个请求页面,发到了http://122.51.211.208:9000服务上,因为我们没有配置index.html,所以会报错,这时我们可以修改代理的配置,比如说只有接口我们才通过代理取数据,而页面使用我们本地的,这样就可以满足我们的开发需求

 devServer: {
    port: 9000,
    proxy: {
      '/api': {    //关注点
        target: 'http://122.51.211.208:9000',
        ws: true,
        changeOrigin: true
      }
    },
    historyApiFallback: true
  }

在这种配置中,我们将接口请求和页面请求分离开来,接口都以api开头,这也符合实际的接口格式

2.vue-cli2的项目

依次打开上图的文件目录,在devserver的位置增加相同的配置即可

注意:如果是多页应用,而且都采用history模式,可以将historyApiFallback设置为一个对象,根据正则匹配不同的路径返回不同的首页

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/views/landing.html' },
    { from: /^\/subpage/, to: '/views/subpage.html' },
    { from: /./, to: '/views/404.html' }
  ]
}

---

传送门: 详细配置可以参考=>webpack官网的配置

二.生产环境

如果是生成模式,这个的配置通常是由后台做的,根据服务的不同,配置也不尽相同,详细可以参考vue-router的官网配置

传送门: 详细配置可以参考=>vue-router官网的配置