Vue+Laravel Mix生产环境报错TypeError: o is not a function求助

问题 #

我使用Vue 2搭配Laravel Mix/Webpack开发，Node版本为14.18.1。执行npm run dev时项目运行完全正常，但运行npm run production构建生产环境代码时，抛出错误：TypeError: o is not a function。

错误截图：

我的配置文件 #

webpack.mix.config.js

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

mix.webpackConfig({
    output: {
        publicPath: '/laravel/',
        chunkFilename: 'js/chunks/[name].js?id=[chunkhash]'
    }
});

mix.js('resources/js/app.js', 'public/laravel/js')
    .sass('resources/sass/app.scss', 'public/laravel/css')
    .sourceMaps()
    .setPublicPath('public/laravel/')
    .setResourceRoot('../')
    .version();

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18.1",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "bootstrap": "^4.3.1",
        "core-js": "^3.2.1",
        "cross-env": "^5.2.1",
        "jquery": "^3.6.0",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.21",
        "popper.js": "^1.15.0",
        "vue": "^2.6.10",
        "vue-server-renderer": "^2.6.10",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.25",
        "@fortawesome/free-solid-svg-icons": "^5.11.2",
        "@fortawesome/vue-fontawesome": "^0.1.7",
        "@google/markerclustererplus": "^2.1.11",
        "bootstrap-vue": "^2.17.3",
        "google-maps-api-loader": "^1.1.1",
        "icheck": "^1.0.2",
        "intl-tel-input": "^15.1.2",
        "magnific-popup": "^1.1.0",
        "node-sass": "^4.14.1",
        "nouislider": "^13.1.5",
        "pretty-checkbox-vue": "^1.1.9",
        "regenerator-runtime": "^0.13.3",
        "sweetalert2": "^7.33.1",
        "v-lazy-image": "^1.3.2",
        "v-mask": "^2.2.3",
        "vue-clickaway": "^2.2.2",
        "vue-cookie-law": "^1.8.0",
        "vue-flickity": "^1.2.1",
        "vue-float-label": "^1.6.1",
        "vue-gallery": "^1.5.0",
        "vue-loading-skeleton": "^1.1.9",
        "vue-notification": "^1.3.20",
        "vue-perfect-scrollbar": "^0.1.0",
        "vue-slider-component": "^2.8.16",
        "vue-tel-input": "^2.5.0",
        "vuex": "^3.1.1",
        "vuse": "^0.1.1",
        "webpack-jquery-ui": "^2.0.1",
        "wnumb": "^1.1.0"
    }
}

解决方案 #

1. 修复版本兼容性问题 #

当前Laravel Mix 2.x版本与Node 14.18.1兼容性不佳，可二选一：

• 降级Node到12.x LTS版本；
• 升级Laravel Mix到4.x版本（适配Vue 2，且支持Node 10+）。

2. 调整压缩混淆配置 #

生产构建的TypeError大概率是代码压缩时函数名被混淆导致的，修改webpack.mix.config.js：

// 方法一：保留函数名防止混淆
mix.webpackConfig({
    output: {
        publicPath: '/laravel/',
        chunkFilename: 'js/chunks/[name].js?id=[chunkhash]'
    },
    optimization: {
        minimizer: [
            new (require('terser-webpack-plugin'))({
                terserOptions: {
                    keep_fnames: true
                }
            })
        ]
    }
});

// 方法二：临时禁用压缩，验证问题根源
mix.options({
    terser: {
        enabled: false
    }
});

3. 排查第三方依赖 #

逐个移除近期新增的第三方依赖（如vue-flickity、v-mask等），每次移除后执行npm run production，定位到引发错误的包，更换为兼容版本或替代方案。

4. 更新Babel配置 #

旧版Babel插件可能导致生产构建转译错误：

1. 安装依赖：

npm install @babel/core @babel/preset-env --save-dev

2. 项目根目录创建.babelrc：

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": 3
        }]
    ],
    "plugins": ["syntax-dynamic-import"]
}

5. 清理缓存重装依赖 #

rm -rf node_modules package-lock.json
npm cache clean --force
npm install
npm run production

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