Laravel Inertia Vite生产环境页面丢失及更新不生效求助

一、解决前端变更部署后不生效问题 #

1. 彻底清理前端依赖与构建缓存
   先删除旧依赖和锁文件，重装后重新构建，避免缓存的旧资源干扰：

   rm -rf node_modules package-lock.json
   npm install
   npm run build
   

2. 确认构建产物同步到服务器

   • 检查服务器public目录下的js、css文件夹，确认文件修改时间为最新，且文件哈希值和本地构建产物一致。
   • 如果用Git部署，确保public/build（或前端构建输出的对应目录）未被.gitignore排除，部署时同步了最新构建文件。

3. 配置服务器缓存规则（以Nginx为例）
   给带哈希的静态资源设置长期缓存，同时确保入口文件不被缓存：

   location ~* \.(js|css|png|jpg|svg)$ {
       expires 1y;
       add_header Cache-Control "public, immutable";
   }
   
   location / {
       add_header Cache-Control "no-cache, no-store, must-revalidate";
   }
   

   配置后重启服务器：sudo systemctl restart nginx

4. 强制清理客户端缓存
   用快捷键强制刷新页面（Ctrl+Shift+R / Cmd+Shift+R），跳过浏览器本地缓存。若使用CDN，手动刷新CDN缓存。

二、解决Page not found: ./Pages/Posts/Show.vue错误 #

1. 检查文件路径大小写
   Linux服务器区分文件名大小写，本地Windows/macOS默认不区分。确认服务器上文件路径为./Pages/Posts/Show.vue（首字母大写），而非show.vue或其他大小写组合。

2. 验证路由配置的路径拼写
   打开Vue路由定义文件（如router/index.js），确保引入路径和实际文件完全一致：

   // 错误示例：大小写或拼写不符
   import Show from './Pages/Posts/show.vue'
   
   // 正确示例：匹配实际文件路径
   import Show from './Pages/Posts/Show.vue'
   

3. 检查构建工具路径配置

   • 若用Vite，确认vite.config.js的别名配置正确：

     export default defineConfig({
         resolve: {
             alias: {
                 '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
             },
         },
     })
     

   • 若用Laravel Mix，确认webpack.mix.js路径配置正常，重新执行npm run build。

4. 修复服务器文件权限
   确保服务器进程有读取Vue文件的权限：

   sudo chown -R www-data:www-data /var/www/your-project/resources/js
   sudo chmod -R 755 /var/www/your-project/resources/js
   

额外排查点 #

• 查看Laravel日志（storage/logs/laravel.log），排查是否有服务器端的路径或权限错误。
• 查看npm run build的输出日志，确认构建过程中是否有文件缺失、语法错误等警告。

内容的提问来源于stack exchange，提问作者Ed Stephenson