0

我使用 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();

图片1

图片2

图3

4

1 回答 1

0

尝试使用pingCRM githubwebpack.mix.js提供的惯性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请注意，您可能必须按照可以在此处找到的设置说明进行操作，仅当您打算使用它时才这样做，否则require('tailwindcss'),从 webpack 文件中删除

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

于 2021-03-23T14:09:12.553 回答