Vue/Laravel应用生产环境manifest.json未加载问题

开发环境下manifest.json可被浏览器正常识别，但生产环境中页面头部未关联该文件。已在app.blade.php中添加manifest.json的链接，但生产服务器页面源码中无该链接。

相关代码 #

app.blade.php #

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}"/>
        <link rel="manifest" href="manifest.json" />
        
        <title>{{env('APP_NAME')}}</title>
    </head>
    <body class="antialiased">
        <div id="app"></div>  
        <script src="{{ asset('js/main.js') }}"></script>
    </body>
</html>

webpack.mix.js #

const mix = require('laravel-mix');
const path = require('path');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.ts('resources/js/main.ts', 'public/js')
  .vue({ version: 3 })
  .postCss('resources/css/app.css', 'public/css', [
    //
  ])
  .sourceMaps();

mix.browserSync('http://localhost/');

mix.webpackConfig(module.exports = {
  resolve: {
    alias: {
      '@/pages': path.resolve(__dirname, './resources/js/pages'),
      '@/assets': path.resolve(__dirname, './resources/js/assets'),
    },
  },

});

mix.webpackConfig({
  plugins: [
    new WebpackManifestPlugin(),
    new WebpackPwaManifest({
      name: "DC",
      short_name: "DC",
      start_url: "/",
      display: "standalone",
      theme_color: "#004c97",
      background_color: "#fff",
      icons: [
        {
          "src": path.resolve(__dirname, './resources/js/assets/images/logo-pwa.png'),
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      id: "/#/login",
      filename: 'manifest.json',
      publicPath: '/',
      basePath: '/public',
    }),
  ],
});


mix.options({
  hmrOptions: {
    host: 'localhost',
    port: 8000
  }
})  

生产环境页面输出 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="irPGXqkRHKDYOBD1G0rPYsNp0Iwu881BIeCbmBfo"/>
        <title>Abc</title>
    </head>
    <body class="antialiased">
        <div id="app"></div>  
        <script src="https://xxxx/js/main.js"></script>
    </body>
</html>

解决步骤 #

• 清除Laravel视图缓存：生产环境下Laravel会缓存视图文件，修改app.blade.php后需清除缓存才能生效：

  php artisan view:clear
  php artisan cache:clear
  php artisan config:clear
  

• 修正manifest路径引用：使用Laravel的asset()辅助函数生成正确的资源URL，避免路径适配问题：

  <link rel="manifest" href="{{ asset('manifest.json') }}" />
  

• 调整WebpackPwaManifest配置：移除或修正basePath配置，Laravel Mix默认将资源输出到public目录，无需额外指定/public：

  new WebpackPwaManifest({
    // ...其他配置项
    filename: 'manifest.json',
    publicPath: '/',
    basePath: '', // 设为空字符串或直接删除该配置
  }),
  

  重新编译生产环境资源：

  npm run prod
  

• 验证manifest文件存在：检查public目录下是否生成了manifest.json，确认文件内容和路径正确。

内容的提问来源于stack exchange，提问作者Muhammad Ibrahim