Laravel+Vue生产环境编译报错：s is not a function 排查求助

问题背景 #

基于Laravel、Vue.js、VueRouter、Vuex开发的应用，使用Webpack（Laravel Mix）编译资源。npm run dev/npm run watch模式下编译运行正常，但执行npm run prod生产编译后，页面抛出TypeError: s is not a function，错误仅指向vue.common.prod.js，无法定位具体代码位置。

排查步骤 #

1. 禁用生产环境代码压缩，定位具体报错位置 #

生产编译的代码被压缩混淆后变量名被替换（比如s就是压缩后的变量），无法直接定位问题。可以通过两种方式临时禁用压缩：

• 修改package.json中的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 --optimize-minimize=false"
  

• 或者在webpack.mix.js中添加配置：

  mix.options({
    uglify: false
  });
  

重新执行npm run prod，此时报错会显示原始变量名和具体代码文件，快速定位出错位置。

2. 检查依赖版本兼容性 #

从配置的package.json可见，Vue版本为2.5.7，但部分依赖存在版本不匹配问题：

• @fullcalendar/vue@5.x要求Vue版本至少2.6.0，与当前2.5.7存在兼容性冲突
• vue-router@3.5.2、vuex@3.5.1建议与Vue 2.5.x对应版本匹配（Vue 2.5.x适配vue-router 3.0.x、vuex 3.0.x）

建议先升级Vue到2.6.x稳定版，或降级不兼容的依赖到对应版本。

3. 排查代码中的隐性类型错误 #

开发模式下Vue的警告机制会忽略部分隐性错误，但生产模式压缩后会暴露问题：

• 检查是否将非函数类型的值当作函数调用（比如误将对象、字符串赋值给函数变量）
• 检查Vue组件的生命周期钩子、方法定义是否存在语法错误（比如箭头函数导致的this指向异常）
• 检查第三方库的调用方式是否符合版本要求（比如element-ui组件使用、fullcalendar初始化流程）

4. 验证代码拆分配置 #

当前mix.extract()包含多个依赖，可能存在模块拆分后的加载顺序或引用问题：

• 临时注释mix.extract()代码，重新执行npm run prod，若错误消失，说明是拆分配置导致的问题，需调整extract的依赖列表或模块导入方式。

5. 优化Source Map配置 #

当前webpack.mix.js启用了sourceMaps()，但生产模式的Source Map可能未正确生成，无法映射到原始代码。可临时修改Source Map类型：

mix.sourceMaps(true, 'eval-source-map')

重新编译后，在浏览器开发者工具中可通过Source Map直接定位到原始代码的错误位置。

相关配置文件 #

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": {
        "@fortawesome/fontawesome-free": "^5.14.0",
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "laravel-mix": "^3.0.0",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "@fullcalendar/core": "^5.11.3",
        "@fullcalendar/daygrid": "^5.11.3",
        "@fullcalendar/interaction": "^5.11.3",
        "@fullcalendar/list": "^5.11.3",
        "@fullcalendar/timegrid": "^5.11.3",
        "@fullcalendar/vue": "^5.11.3",
        "ajv": "^6.12.3",
        "animate.css": "^3.7.2",
        "aos": "^2.3.4",
        "apexcharts": "^3.33.0",
        "chart.js": "^2.7.3",
        "element-ui": "^2.4.8",
        "imagemin": "^6.0.0",
        "jquery": "^3.4.1",
        "moment": "^2.27.0",
        "node-sass": "^4.14.1",
        "numeral": "^2.0.6",
        "simple-keyboard": "^2.29.72",
        "toastr": "^2.1.4",
        "vue-apexcharts": "^1.6.2",
        "vue-chartjs": "^3.4.0",
        "vue-data-tables": "^3.4.5",
        "vue-router": "^3.5.2",
        "vue-touch-keyboard": "^0.3.2",
        "vuedraggable": "^2.24.3",
        "vuex": "^3.5.1",
        "xml-js": "^1.6.11"
    }
}

webpack.mix.js #

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

/*
 |--------------------------------------------------------------------------
 | 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/front/app.js', 'public/js')
    .extract(['vue','vuex', 'jquery', 'bootstrap', 'axios', 'element-ui', 'lodash', 'moment', 'popper.js'])
    .version();


mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.json', '.vue'],
        alias: {
            '@': path.join(__dirname, './resources/js'),
            '~': path.join(__dirname, './resources/js/front'),
            '@@': path.join(__dirname, './modules'),
            '@components': path.join(__dirname, './resources/js/components')

        }
    },
    output: {
         filename:'[name].js',
         chunkFilename: 'js/[name].js',
    },
}).sourceMaps()    

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