鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ Event對(duì)象被替換成vue的對(duì)象

Event對(duì)象被替換成vue的對(duì)象

題目描述

項(xiàng)目中用到了fastclick.js 在入口文件上引入vue和fastclick,FastClick.attach(document.body); 源碼里面會(huì)用到Event對(duì)象,但莫名變成了vue對(duì)象所以報(bào)了一個(gè)Cannot read property 'stopImmediatePropagation' of undefined的錯(cuò)誤

題目代碼

入口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']
}, // 項(xiàng)目的入口文件
output: {
    path: path.resolve(__dirname, './views'), // 項(xiàng)目的打包文件路徑
    publicPath: './', // 通過(guò)devServer訪問(wèn)路徑
    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選項(xiàng)參數(shù)可以定義多大的圖片轉(zhuǎn)換為base64
                    limit:50000, // 表示小于50kb的圖片轉(zhuǎn)為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 設(shè)置提取異步代碼中的公用代碼
          chunks: "async",
          name: 'commons-async',
          /**
           * minSize 默認(rèn)為 30000
           * 想要使代碼拆分真的按照我們的設(shè)置來(lái)
           * 需要減小 minSize
           */
          minSize: 0,
          // 至少為兩個(gè) chunks 的公用代碼
          minChunks: 2
        }
      }
    },
    /**
     * 對(duì)應(yīng)原來(lái)的 minchunks: Infinity
     * 提取 webpack 運(yùn)行時(shí)代碼
     * 直接置為 true 或設(shè)置 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

題目圖片

clipboard.png

clipboard.png

console.log(Event) 正常彈出的是 ? Event() { [native code] } 但現(xiàn)在變成
Vue$3?{_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue$3,?…}

回答
編輯回答
舊酒館

在某個(gè)模塊里面被替換了? 可以先自查下
入口js從只保留這段代碼

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

慢慢把原有模塊加上去,看看是不是引用的哪個(gè)模塊修改了全局Event

我剛剛測(cè)試了一下強(qiáng)行把全局Event手動(dòng)替換也沒(méi)觸發(fā)你這個(gè)錯(cuò)誤 真神奇

2017年1月14日 11:57