webpack -p 参数打包后 vue 组件自定义事件不执行了?

webpack -p 参数打包后 vue 组件自定义事件不执行了?
webpack -w打包的时候没问题,一切正常;
webpack -p打包后事件触发不了了。

package.json 配置

{
  "name": "typescript_test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --env.production --profile --progress --optimize-minimize",
    "build-test": "webpack --env.build-test --profile --progress",
    "start": "webpack-dev-server --open -d --env.dev "
  },
  "author": "huangtao",
  "license": "ISC",
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

webpack.config.js配置如下

"use strict";
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = function (env, argv) {
    console.log(env);
    console.log(argv);
    return {
        // mode: env.production ? 'production' : 'development',
        // mode: "production",
        // entry: './src/index.ts',
        entry: {
            index: './index.ts',
            list: './pages/list/index.ts',
            template_list: './pages/template_list/index.ts',
            design: './pages/design/index.ts',
            show: './pages/show/show.ts'
        },
        devtool: env.production ? false : (env.dev ? 'source-map' : false),
        output: {
            // filename: 'bundle.js',
            filename: './js/[name]-[hash].bundle.js',
            path: path.resolve(__dirname, 'dist'),
        },
        devServer: {
            // contentBase: './',
            hot: true,
            port: '8080',
            open: true,
            // 告诉服务器从哪里dist目录中提供内容
            contentBase: './dist'
        },
        // optimization: {
        //     minimizer: [new UglifyJsPlugin()],
        // },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './index.html',
                chunks: ['index']
            }),
            new HtmlWebpackPlugin({
                filename: 'pages/list/index.html',
                template: './pages/list/index.html',
                chunks: ['list']
            }),
            new HtmlWebpackPlugin({
                filename: 'pages/template_list/index.html',
                template: './pages/template_list/index.html',
                chunks: ['template_list']
            }),
            new HtmlWebpackPlugin({
                filename: 'pages/design/index.html',
                template: './pages/design/index.html',
                chunks: ['design']
            }),
            new HtmlWebpackPlugin({
                filename: 'pages/show/show.html',
                template: './pages/show/show.html',
                chunks: ['show']
            }),
            // 打印更新的模块路径
            new webpack.NamedModulesPlugin(),
            // 热更新插件
            new webpack.HotModuleReplacementPlugin(),
            // css独立打包插件
            // new ExtractTextPlugin({filename:'[name]-[hash].css', allChunks: false}),
            // vue 插件
            new VueLoaderPlugin(),
        ],
        module: {
            rules: [
                {
                    test: /\.vue.(ts|tsx)$/,
                    exclude: /node_modules/,
                    enforce: 'pre',
                    use: [
                        {
                            loader: 'vue-tslint-loader', // 代码规范检查
                            options: { /* Loader options go here */
                                "formatter": "stylish",// 日志输出格式
                            }
                        }
                    ]
                },
                {
                    test: /^(?!.*\.vue\.ts).*\.ts$/, // 非.vue.ts 的ts文件
                    exclude: /node_modules/,
                    enforce: 'pre',
                    use: [
                        {
                            loader: 'tslint-loader',// 代码规范检查
                            options: { /* Loader options go here */
                                "formatter": "stylish",// 日志输出格式
                            }
                        }
                    ]
                },
                {
                    test: /\.ts$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                    options: {
                        appendTsSuffixTo: [/\.vue$/]
                    }
                },
                // {
                //     test: /\.tsx$/,
                //     loader: 'ts-loader',
                //     exclude: /node_modules/
                // },
                {
                    test: /\.css$/,
                    use: ['vue-style-loader', 'style-loader', 'css-loader']
                },
                {
                    test: /\.less$/,
                    use: ['vue-style-loader', 'style-loader', 'css-loader', 'less-loader']
                },
                {
                    test: /\.(html|htm|xhtml)$/,
                    use: ['html-loader']
                },
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /\.(jpg|jpeg|gif|png)$/,
                    use: [
                        {
                            loader: "url-loader",
                            options: {
                                limit: 12000,
                                name: "[name].[hash].[ext]",
                                outputPath: 'images',
                                publicPath: '/images'
                            }
                        }
                    ]
                },
                {
                    test: /\.(ttf|eot|woff|woff2|svg)$/,
                    use: [
                        {
                            loader: "url-loader",
                            options: {
                                limit: 12000,
                                name: "[name].[hash].[ext]",
                                outputPath: 'font',
                                publicPath:'/font'
                            }
                        }
                    ]
                }
            ]
        },
        resolve: {
            extensions: ['.tsx', '.vue', '.ts', '.js'],
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }

        }
    };
};

最佳答案

已找到原因,vue 中不能使用大写事件,需要全部使用小写,但在不适用-p 参数进行压缩的时候,大小写的事件也能触发,很奇怪。

解决方案,全部使用小写事件

事件名
不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:

this.$emit('myEvent')
则监听这个名字的 kebab-case 版本是不会有任何效果的:



不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此,我们推荐你始终使用 kebab-case 的事件名。