vue项目 history nginx部署访问报404

在Vue.js项目中，当通过`history`模式部署到服务器，并依赖Nginx做反向代理时，遇到404错误通常是由于以下原因：

1. **路由配置**：确认Vue应用的`router`配置是否设置为`history`模式，并且设置了合适的base URL。例如，在`main.js`中：

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'

   // 使用history模式
   Vue.config.historyApiFallback = true

   new Vue({
     render: h => h(App),
     router,
   }).$mount('#app')

2. **Nginx配置**：在Nginx的server block中，你需要配置`try_files`和`proxy_pass`，确保静态文件请求和Vue应用的代理。例如：

   location / {
       try_files $uri $uri/ @vue-app;
       proxy_pass http://localhost:8080; # 指向Vue应用的端口
   }

   location @vue-app {
       proxy_pass http://localhost:8080; # 同上
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }

3. **权限问题**：检查服务器上的目录权限，确保Nginx有访问静态文件和Vue应用打包后的dist目录的权限。

如果上述步骤都做了还是报404，检查浏览器的控制台网络请求，看看是否有正确的资源路径被请求。另外，记得清理一下缓存，重启Nginx服务试试。