使用 Vue-Router 时，Webpack 在 Laravel 应用程序中生成空 CSS 文件

Question

我有一个 Laravel 应用程序，它使用 webpack 来编译一些 SASS 资产。

mix.js('resources/js/vue/User/dashboard.js', 'public/js/User')

.js('resources/js/vue/home.js', 'public/js')
.js('resources/js/vue/admin-dashboard.js', 'public/js/admin')

.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/layouts.scss', 'public/css');

在它编译的一个 JS 文件中，是一个创建 webpack 块的 Vue-Router 实例：

const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/admin",
            component: () => import("./admin/Dashboard.vue" /* webpackChunkName: "js/admin/components/dashboard" */ )
        }
    ],
    scrollBehavior (to, from, savedPosition) {
        return savedPosition || { x: 0, y: 0 };
    }
});

以上代码破坏了我的 CSS 资产的编译。当我运行 npm run dev 时，输出显示 CSS 文件已正确生成。

 DONE  Compiled successfully in 3177ms                                                                                                                                                                   3:16:42 PM

           Asset      Size  Chunks             Chunk Names
    /css/app.css   196 KiB     mix  [emitted]  mix
/css/layouts.css  9.91 KiB     mix  [emitted]  mix

然而，当我检查 .css 文件时，它们都是空的。如果我注释掉 Vue-Router 部分，CSS 文件会正确生成。

为什么包含 Vue-Router webpack 块会破坏 CSS 资产的编译？

Answer 1

这似乎是 Laravel Mix 的问题，如 this release 的注释部分及其处理动态导入的方式所述

注释

如果您的项目大量使用 JavaScript 动态导入，您可能需要推迟到明年初发布的 webpack 5。有一些与此相关的已知编译问题，我们在此之前无法修复。一旦 webpack 5 发布，Mix 将很快更新。

这将在 webpack 5 发布时修复，因此当前的解决方法是将 Laravel mix 降级到版本 ^3.0

Answer 2

我只是更换了调用组件的方式。

发件人：

component: () => import('Login')

收件人：

component: require('Login').default

而且一切正常，我不太确定是不是一回事。也许有人可以详细说明我的解决方案。

Answer 3

2020 年 10 月更新

as JeffreyWay 在这里描述 https://github.com/JeffreyWay/laravel-mix/issues/1914#issuecomment-706608848

This was a known issue with Mix and webpack 4. We tried for a long time to resolve it, but every option ended up breaking a different part of the Mix API.

The problem is solved in Mix v6 which now uses webpack 5.

已测试 laravel 混合版本 v6.0.0-beta.10 extract() 和 dynamic import.

routes.js

function view(path) {
  return () =>
    import(
      /* webpackPrefetch: true */
      `@/views/${path}`
    ).then(module => module.default || module);
}

export default [
  {
    path: "/login",
    name: "login",
    component: view("auth/login.vue")
  },
]

webpack.mix.js

mix.extract();

结果：

使用 Vue-Router 时，Webpack 在 Laravel 应用程序中生成空 CSS 文件

Webpack generating empty CSS files in Laravel app when using Vue-Router

sass

laravel

webpack

laravel-5

laravel-mix