vue项目兼容IE浏览器babel配置
vue项目在IE在浏览器中无法打开,报错script .js ':'原因:es6,7语法在IE浏览器中无法正常解析然后子引用了babel插件,但是安装配置后仍然在IE浏览器中无法打开后面发现是自己插件下载配置不完整,下面是自己打开得了的配置在package.json配置如下babel插件"devDependencies": {"@babel/core": "^7.11.1","@babel/plu
·
vue项目在IE在浏览器中无法打开,报错
script .js ':'
原因:es6,7语法在IE浏览器中无法正常解析
然后子引用了babel插件,但是安装配置后仍然在IE浏览器中无法打开
后面发现是自己插件下载配置不完整,下面是自己打开得了的配置
在package.json配置如下babel插件
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/plugin-transform-runtime": "^7.11.0",
"@babel/polyfill": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-plugin-eslint": "^3.9.0",
"@vue/cli-service": "^3.9.0",
"@vue/eslint-config-standard": "^4.0.0",
"autoprefixer": "^9.8.6",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.6",
"babel-plugin-transform-remove-console": "^6.9.4",
"babel-polyfill": "^6.26.0",
"babel-preset-stage-0": "^6.24.1",
"es6-promise": "^4.2.8",
}```
配置好后npm install安装即可,接下来就是代码配置
在创建.babelrc文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200813213642887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbGF4X2dv,size_16,color_FFFFFF,t_70#pic_center)
配置如下代码
```javascript
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
在babel.config.js配置如下代码
var plugins = []
if (['production', 'prod'].includes(process.env.NODE_ENV)) {
plugins.push('transform-remove-console')
}
module.exports = {
presets: [
[
'@vue/app',
{
'useBuiltIns': 'entry',
polyfills: [
'es6.promise',
'es6.symbol'
]
}
]
],
plugins: plugins
}
vue.config.js配置如下代码
module.exports = {
transpileDependencies: ['node_modules/webpack-dev-server/client'],
chainWebpack: (config) => {
config.module.rule('compile')
.test(/\.js$/)
.include
.add(resolve('src'))
.add(resolve('test'))
.add(resolve('node_modules/webpack-dev-server/client'))
.add(resolve('node_modules'))
.end()
.use('babel')
.loader('babel-loader')
.options({
presets: [
['@babel/preset-env', {
modules: false
}]
]
})
}
}
main.js文件配置
import 'babel-polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
更多推荐
已为社区贡献2条内容
所有评论(0)