vue路由配置:

javascript">const router = new VueRouter({
  base: process.env.BASE_URL,
  //hash模式下部署到服务器访问没问题，history就不行，需要在服务器上配置
  mode: 'history',
  routes
})

vue.config.js配置:

javascript">module.exports = {
  lintOnSave: false,
  publicPath: process.env.VUE_APP_PATH,
  // publicPath : process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist',
  devServer: {
    disableHostCheck: true,
    // overlay: { // 让浏览器 overlay 同时显示警告和错误
    //   warnings: true,
    //   errors: true
    // },
    https: false, // https:{type:Boolean}
    open: false, //配置后自动启动浏览器
    hotOnly: true, // 热更新
    proxy: { //配置多个代理
      "/api": {
        target: "http://192.168.2.241",
        changeOrigin: true,
        ws: true, //websocket支持
        secure: false,
      },
    }
  },
}

404报错原因：

当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网

解决办法:

我使用的是宝塔面板，nginx服务器，在宝塔网站伪静态设置里添加此配置保存即可解决

代码：

location / {
  if (!-e $request_filename) {
    rewrite  ^(.*)$ /index.html?s=/$1  last;
    break;
  }
}