极客观点
项目管理
HarmonyOS
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 版本是不会有任何效果的：
<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>
不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此，我们推荐你始终使用 kebab-case 的事件名。