如果在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的项目