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

问题出现原因：低版本浏览器内核不支持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: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 83: …Config }̲, { …/,
loader: ‘babel-loader’,
query:{presets:[‘es2015’]},
include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’)]
},

4.在.babelrc文件里加入

{
“presets”:[“es2015”, “stage-2”],
}

二 、 vue3.x 版本

添加 .babelrc 文件 （@vue/cli@3.x版本 脚手架已经封装过babel-polyfill）
内容如下：
{
“presets”: [
“@vue/cli-plugin-babel/preset”
]
}

如果上面的方式仍然未解决问题，
再试一试下面的方式：
npm i @babel/preset-env -D
npm i babel-preset-es2015

添加 .babelrc 文件
内容如下：
{
“presets”: [["@babel/preset-env", { “modules”: false }]],
“plugins”: []
}

以上均为自己踩过的坑，总结的处理方式，如有错误之处，欢迎指出更正，谢谢！