Laravel+Vue应用部署至Plesk后未加载全部资源仅显示页脚问题咨询

这是静态资源强缓存策略与打包配置不匹配导致的问题，和代码业务逻辑无关，也不是Plesk的功能故障：

• Plesk默认会给js、css等静态资源配置max-age长达1年的强缓存规则，用户访问过一次资源后，后续请求会直接读取本地缓存，不会请求服务器
• 你当前的打包配置仅给通过mix()函数引入的入口资源加了查询参数形式的版本哈希，Vue懒加载的分包组件由webpack动态加载，不会自动带上该哈希参数，导致旧版本的分包文件被浏览器长期缓存，新版本部署后无法自动更新
• 强制刷新（Ctrl+F5）会跳过本地缓存直接请求服务器资源，因此刷新后问题消失

1. 调整Laravel Mix打包配置（优先解决） #

修改项目根目录的webpack.mix.js，让webpack给所有动态分包的文件名本身嵌入哈希值，无需依赖查询参数：

mix.webpackConfig({
  output: {
    // 分包文件名自动嵌入内容哈希，每次代码变更哈希值自动变化
    chunkFilename: 'js/[name].[contenthash].js',
    publicPath: '/'
  }
})

// 保留原有version配置即可
mix.version()

重新执行npm run prod编译后，所有懒加载组件的js文件会生成类似js/Header/Header.572289a9.js的文件名，webpack动态加载时会自动带上该哈希，完全避免旧缓存命中问题。

2. 优化Plesk缓存规则（兜底避免后续问题） #

登录Plesk面板进入对应站点的配置页，根据你的Web服务类型添加对应规则：

Nginx 用户 #

找到「Apache & Nginx 设置」→「额外的Nginx指令」，添加以下配置：

# 带哈希的静态资源设置永久缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)\?[a-f0-9]+$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# html等入口文件禁止缓存，保证每次都能拿到最新的资源引用
location ~* \.(html|htm)$ {
  expires -1;
  add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
}

Apache 用户 #

在项目public目录的.htaccess文件中添加以下配置：

<FilesMatch "\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$">
  Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>

<FilesMatch "\.(html|htm)$">
  Header set Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate"
  Header set Expires "Thu, 01 Jan 1970 00:00:00 GMT"
</FilesMatch>

3. 临时解决存量用户的缓存问题 #

如果当前已经有用户遇到白屏问题，可以在入口HTML的<head>标签最上方添加以下脚本，自动触发无缓存刷新：

<script>
// 每次部署更新该版本号即可
const CURRENT_APP_VERSION = '2024052001';
const userVersion = window.localStorage.getItem('app_version');

if (userVersion !== CURRENT_APP_VERSION) {
  window.localStorage.setItem('app_version', CURRENT_APP_VERSION);
  // true参数表示跳过缓存从服务器重新加载
  window.location.reload(true);
}
</script>

内容的提问来源于stack exchange，提问作者Alberto Plata de León