vue项目打包部署到服务器上后页面404问题

vue路由配置:

const router = new VueRouter({
  base: '/app/web',//部署到服务器上的路径
  //hash模式下部署到服务器访问没问题，history就不行，需要在服务器上配置
  mode: 'history',
  routes
})

vue.config.js配置:

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: "",
        changeOrigin: true,
        ws: true, //websocket支持
        secure: false,
      },
    }
  },
}

404报错原因：

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

解决办法:

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

代码：

# app/web 前端项目
location /app/web/ {
    try_files $uri $uri/ /app/web/index.html;
}