Laravel Mix无法构建Vue3 TS资源 编译卡在12%无响应

你遇到的是WSL2环境下Laravel Mix打包Metronic 8.1这类重型前端资源的典型故障，和内存配置无直接关联，按以下优先级排查修复：

1. 修复WSL2底层IO性能问题 #

• 绝对不要把项目放在Windows挂载分区下：也就是不要存放在/mnt/c/、/mnt/d/这类跨系统挂载路径，WSL2访问Windows分区的IO性能比原生Ext4文件系统低90%以上，Metronic模板单项目依赖文件数过万，跨分区读取会直接导致构建假死。将整个项目迁移到WSL2原生目录，例如~/projects/your-laravel-app路径下再执行构建。
• 修正WSL配置生效方式：修改.wslconfig后不要仅重启LxssManager服务，先在Windows PowerShell中执行wsl --shutdown，等待30秒后再重新启动WSL，确保配置完全加载。同时补充swap配置避免内存回收卡顿，完整配置参考：

[wsl2]
memory=10GB
swap=4GB
localhostForwarding=true
pageReporting=true

2. 修复webpack.mix.js配置错误 #

你当前配置存在正则写法错误、缺少构建优化规则的问题，是导致卡进度的核心原因：

• 现有mjs匹配正则test: /.mjs$/i缺少转义符，会匹配到几乎所有文件，导致webpack陷入无限遍历。正确写法为test: /\.mjs$/i。
• 补充构建缓存、忽略无用依赖解析、关闭冗余处理逻辑，修改后的完整配置参考：

const mix = require("laravel-mix");
const path = require("path");
const webpack = require('webpack');

mix.ts("resources/ts/app.ts", "public/js")
    .vue({ version: 3 })
    .webpackConfig({
        cache: {
            type: 'filesystem',
            cacheDirectory: path.resolve(__dirname, '.webpack-cache'),
        },
        module: {
            rules: [
                {
                    test: /\.mjs$/i,
                    resolve: {
                        byDependency: { esm: { fullySpecified: false } },
                    },
                },
            ],
            noParse: /^(vue|vue-router|pinia|@popperjs\/core)$/
        },
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "resources/ts/src/"),
            },
            symlinks: false
        },
        plugins: [
            new webpack.WatchIgnorePlugin({
                paths: [/node_modules/, /public/]
            })
        ],
        snapshot: {
            managedPaths: [path.resolve(__dirname, 'node_modules')]
        }
    })
    .disableNotifications()
    .options({
        processCssUrls: false
    });

• 不要在Sail容器内执行前端构建：Sail容器本身存在资源限制、文件挂载额外开销，会进一步拖慢构建速度。直接在WSL2原生环境安装16.x/18.x LTS版本Node.js（Metronic 8.1不兼容Node 20+版本）执行构建即可，生成的静态资源会直接存入Laravel的public目录，Sail服务可正常访问。

3. 优化TS配置与依赖安装 #

• 调整tsconfig编译目标：当前target: "es5"配置会导致TS转译所有Metronic的现代JS语法到ES5版本，转译工作量提升3倍以上。开发阶段直接将target改为es2020，所有现代浏览器均原生支持，转译速度可提升70%。
• 重装依赖避免兼容问题：删除项目下的node_modules目录和package-lock.json文件，在WSL原生路径下重新执行npm install，禁止直接复用Windows环境下安装的node_modules目录，跨系统的二进制依赖会直接导致构建假死。
• 裁剪构建范围：Metronic 8.1默认包含上百个示例页面、第三方插件，直接全量纳入构建会导致资源量过大。初期开发先将暂时不用的插件、示例文件移出构建include范围，仅保留当前开发需要的文件即可。

故障定位技巧 #

如果按上述步骤操作后仍卡顿，执行npx mix --progress --verbose打印详细构建日志，可直接定位到具体卡在哪个文件的处理环节，针对性排查即可。

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