vue2.x解决pc端微信网页白屏问题 ——es6转es5

最新推荐文章于 2022-06-07 14:26:31 发布

Lilio1216

最新推荐文章于 2022-06-07 14:26:31 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： es6 vue.js

本文链接：https://blog.csdn.net/var_deng/article/details/108336511

版权

本文介绍了如何处理Vue2.x在使用ES6语法时，低版本浏览器出现的白屏问题。通过安装并配置babel-polyfill和es6-promise，将ES6语法转换为ES5，确保在旧版浏览器中的兼容性。在main.js中引入babel-polyfill，更新webpack配置，并在.babelrc文件中设置预设。对于Vue3.x，可以使用@vue/cli的preset或直接配置@babel/preset-env来解决此问题。

摘要由CSDN通过智能技术生成

问题出现原因：低版本浏览器内核不支持es6语法
解决方法：结合babel-polyfill插件将es6语法转为es5语法

一： vue 2.x 版本

1.npm安装

npm install babel-polyfill
npm install es6-promise

package.json中会出现
“babel-polyfill”: “^6.26.0”,
“es6-promise”: “^4.1.1”,

2.main.js引入

import ‘babel-polyfill’
import Vue from ‘vue’
import Es6Promise from ‘es6-promise’
require(‘es6-promise’).polyfill()
Es6Promise.polyfill()

3.webpack.base.conf.js相关配置

module.exports = {
entry: {
app: [‘babel-polyfill’, ‘./src/main.js’]
},
module: {
rules: [{
test: /.vue $KaTeX parse error: Expected 'EOF', got '}' at position 83: \dotsConfig }̲, { \dots$ /,
loader: ‘babel-loader’,
query:{presets:[‘es2015’]},
include: [resolve(‘src’),