Event对象被替换成vue的对象

Question

题目描述

项目中用到了fastclick.js 在入口文件上引入vue和fastclick,FastClick.attach(document.body); 源码里面会用到Event对象,但莫名变成了vue对象所以报了一个Cannot read property 'stopImmediatePropagation' of undefined的错误

题目代码

入口js
import Vue from 'vue'
import FastClick from 'fastclick';
FastClick.attach(document.body);

webpack4配置
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var appConfig = require( "./app.config.js");
var poxcyPath = appConfig.poxcyPath;
console.log('./'+poxcyPath)
const config = {

mode:process.env.NODE_ENV,
//mode: 'development',
entry: {
    index: ['./src/index.js']
}, // 项目的入口文件
output: {
    path: path.resolve(__dirname, './views'), // 项目的打包文件路径
    publicPath: './', // 通过devServer访问路径
    filename: poxcyPath+'js/[name].js', // 打包后的文件名,
    chunkFilename: poxcyPath+'js/[name].bundle.js',
},
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js', 
        '@': path.resolve(__dirname,'./src'),
    }
},    
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        },
        {
            test: /\.vue$/,
            exclude: /node_modules/,
            loader: "vue-loader",             
        },                      
        {
            test: /\.css$/,
            use: [ 
                process.env.NODE_ENV !== 'production'
                ? 'vue-style-loader': 
                {
                    loader:MiniCssExtractPlugin.loader,
                    options: { 
                        publicPath: '../' //图片引用
                    }
                },     
                "css-loader",               
            ]
        },
        {
            test: /\.less$/,
            use: [
                process.env.NODE_ENV !== 'production'
                ? 'vue-style-loader': 
                {
                    loader:MiniCssExtractPlugin.loader,
                    options: { 
                        publicPath: '../' //图片引用
                    }
                },                    
              'css-loader',
              'less-loader',
              'postcss-loader'
            ]
        },            
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                    limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                    name: 'images/[name].[hash:7].[ext]',
                }
            }]
        }
               
    ]
},
optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        // 提取 node_modules 中代码
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",

        },
        commons: {
          // async 设置提取异步代码中的公用代码
          chunks: "async",
          name: 'commons-async',
          /**
           * minSize 默认为 30000
           * 想要使代码拆分真的按照我们的设置来
           * 需要减小 minSize
           */
          minSize: 0,
          // 至少为两个 chunks 的公用代码
          minChunks: 2
        }
      }
    },
    /**
     * 对应原来的 minchunks: Infinity
     * 提取 webpack 运行时代码
     * 直接置为 true 或设置 name
     */
    runtimeChunk: {
      name: 'manifest'
    }
  }, 
plugins: [
    new HtmlWebpackPlugin({
        filename: 'booking.html',
        template: path.resolve(__dirname,'./views/booking.html')
    }),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: poxcyPath+"css/[name].css",
        chunkFilename: poxcyPath+"css/[id].css"
    }),        
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
      
],
node: {

    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
},    
devtool: process.env.NODE_ENV=="development"?'cheap-module-eval-source-map':'source-map',

};

module.exports = config

题目图片

console.log(Event) 正常弹出的是 ƒ Event() { [native code] } 但现在变成
Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue$3, …}

Answer 1

在某个模块里面被替换了？ 可以先自查下
入口js从只保留这段代码

console.log(Event)
import Vue from 'vue'
import FastClick from 'fastclick'
FastClick.attach(document.body);

慢慢把原有模块加上去，看看是不是引用的哪个模块修改了全局Event

我刚刚测试了一下强行把全局Event手动替换也没触发你这个错误 真神奇