使用 Laravel Mix 制作的空白页

Question

我使用 Laravel 8 + Vue.js + InertiaJs 构建了一个单页应用程序 (SPA)。在开发环境中一切正常，但是当我为生产编译资产时，它显示一个空白页面，并且控制台中没有错误。所有资产都使用 200 代码正确加载，一切似乎都正常，但 Vue 应用程序未安装！

webpack.mix.js

const mix = require('laravel-mix');
require('laravel-mix-workbox');

mix.webpackConfig({
    output: {
        filename: '[name].js',
        chunkFilename: 'js/[name].js',
    }
}).js('resources/js/app.js', 'public/js')
    .extract(['vue'])
    .version();

Image1

Image2

Image3

Answer 1

尝试使用 pingCRM github 提供的 inertiajs webpack.mix.js:

const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')

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

mix
  .js('resources/js/app.js', 'public/js')
  .vue()
  .postCss('resources/css/app.css', 'public/css', [
    // prettier-ignore
    cssImport(),
    cssNesting(),
    require('tailwindcss'),
  ])
  .webpackConfig({
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.runtime.esm.js',
        '@': path.resolve('resources/js'),
      },
    },
  })
  .version()
  .sourceMaps()

请注意，您可能必须按照 tailwindcss 中的说明进行设置，该说明可在 here 中找到，仅当您打算使用它时才执行此操作，否则请将 require('tailwindcss'), 从网页包文件

您可能还需要 npm install --save-dev postcss-import 和 npm install --save-dev postcss-nesting --save-dev 标志会将其添加到您的 package.json 文件以供将来参考

使用 Laravel Mix 制作的空白页

Blank Page on production using Laravel Mix

inertiajs

laravel

webpack

vue.js

laravel-mix