undefinedfix
Sign in

Vue incompatible (Babel Polyfill) IE browser, white screen

AlphaKiloHotel edited in Tue, 20 Sep 2022

After the Vue project is packaged, it will be displayed in the ie11 browser

Console error:

Script1002: syntax error

Via Vue - The project built by cli2 needs to be compatible with ie11 browser, so Babel is used - Polyfill is normal in the development environment. It will report an error after packaging.

图片描述

Casually speaking, the development environment of Babel - Polyfill can also run normally in ie11 browser

Related codes

//Please paste the code text below (do not use pictures instead of codes) package.json File "dependencies":{

"babel-polyfill": "^6.26.0"

} main.js File / / it seems that you can import 'Babel Polyfill' here or not

webpack . base . conf . JS file entry : {

app: ["babel-polyfill", "./src/main.js"]

},

Since the development environment is OK and the production environment reports errors, I think it's because the compilation results of the development and production environments are different, but I don't know how to change them. At present, the construction mode of the two environments is: devtool: 'Eval'

Looking forward to the great God's advice, thank you

3 Replies
discort
commented on Wed, 21 Sep 2022

I have encountered white screen is basically caused by ES6 syntax, you can check whether the packaged JS contains ES6 code, such as let, const, () = > to simply query. If ES6 is used in JS under PS: static folder, it is not converted to Es5. I hope it can help you.

jpwzv
commented on Wed, 21 Sep 2022

Let's take a look at what grammar causes it and fix the problem

tanish
commented on Wed, 21 Sep 2022

As mentioned on the first floor, the file that reported the error does exist let const => These ES6 code, ie11 does not support, so the report syntax error, I here about Babel - The use of the Polyfill plug-in is correct. The reason why these unexplained codes appear is because of Babel - The compiler scope of the loader is limited because of my static folder and element - The UI also uses ES6 syntax, so it needs to be compiled. The code is as follows:

webpack.base.conf .js

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
      resolve('src'), //默认编译文件
      resolve('static'), //编译静态文件
      resolve('node_modules/element-ui/src'), //编译element-ui
      resolve('node_modules/element-ui/packages') //编译element-ui
    ]
}