laravel - 生产模式编译报错 "is not a function"Vue Laravel Mix

Question

我有一个使用 Webpack 编译我的 Assets 的 Laravel、VueJs、VueRouter、Vuex 应用程序。

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"
    }
}

当我在生产模式 npm run prod 中构建时，出现错误 s is not a function

但如果我像 npm run watch 或 npm run dev 这样在 dev 中构建，我不会收到错误。

如何调试代码中的错误位置以便修复它？它只在 vue.common.prod 行中显示我。

vue.common.prod.js:11 TypeError: s is not a function at e (vue.common.prod.js:11:68600)

我的文件 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()    

Answer 1

• 选项 01) : 检查你写的函数

这是一个标准的 JavaScript 错误，当试图在函数定义之前调用它时。如果您尝试执行未初始化或未正确初始化的函数，则会发生此错误。这意味着表达式没有返回 s 函数对象。因此，您需要了解您要实现的不是功能。

• 选项 02): 删除 node_module 并清除缓存 npm cache clear --force。 之后使用 npm install 重新安装 node_module。

• 选项 03): 检查你导入的东西忘记了导入语句中的大括号。