vue中使用babel-polyfill解决低版本浏览器不兼容问题

Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决

注意：在vue cli3 默认手脚框架也可以兼容低版本问题

presets: [

'@vue/cli-plugin-babel/preset'

],

根目录下新建 .babelrc 文件，这一步项目没有的话可以省掉

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

修改 babel.config.js

module.exports = {
    presets: [
        [
            '@vue/app',
            {
                useBuiltIns: 'entry',
                polyfills: [
                    'es6.promise',
                    'es6.symbol'，

"es6.array.iterator",
"es6.object.assign",
"es6.let"

                ]
            }
        ]
    ]
}

修改 vue.config.js

module.exports = {
    transpileDependencies: ['webpack-dev-server/client'],
    chainWebpack: config => {
        config.entry.app = ['@babel/polyfill', './src/main.js'];
    }
}

修改 main.js 文件

import '@babel/polyfill'
import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()
Es6Promise.polyfill()

安装依赖

npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise @babel/polyfill babel-plugin-transform-remove-console
上解决方法：
修改vue.config.js
这里通过add方法，配置babel需要另外转换的文件

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, '.', dir);
}

module.exports = {
  ...  // 其他配置
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
  // 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: ['node_modules/webpack-dev-server/client'],
  chainWebpack: config => {
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
      .add(resolve('test'))
      .add(resolve('static'))
      .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
          }]
        ]
      });
  }
}

至此，IE、安卓5.1、安卓6.0上页面都能正常访问了

原文说明：https://blog.csdn.net/weixin_44945942/article/details/107036766?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.pc_relevant_default&utm_relevant_index=13

vuex requires a Promise polyfill in this browser.

他说出了问题出现的原因，就是ie9和一些低版本的高级浏览器对es6新语法并不支持，也说出了解决办法

为了方便看帖子同学的使用，再重敲一遍命令行：npm install --save-dev babel-polyfill

 

babel-polyfill用正确的姿势安装之后，引用方式有三种：

1.require("babel-polyfill");

2.import "babel-polyfill";

3.module.exports = {

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

};

注：第三种方法适用于使用webpack构建的同学，加入到webpack配置文件(webpack.config.js)entry项中

重新执行构建命令，在低版本的浏览器中就可以正常打开页面了。

解决方案如下：

方案1：在 webpack.config.js 文件中，entry 入口处修改，加入即可

"babel-polyfill":"babel-polyfill",//用来解决的兼容性

例如：

entry: {
    "babel-polyfill":"babel-polyfill",//用来解决的兼容性
    app: path.resolve(__dirname, config.entry.module + "/app.js"),
    vendor: config.entry.vendor
},

方案2：不修改webpack的情况下，在你的主入口文件头部加入，例如：app.js中加入即可

import 'babel-polyfill'

例如：

import 'babel-polyfill'

import Vue from 'vue';
Vue.config.debug = true;

方案3：也就是使用cdn的资源，以js的文件加入到html页面：例如：

<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>

Vue2.0 之 自带浏览器里无法打开（兼容处理） - 解决方案       https://blog.csdn.net/qq_16559905/article/details/70238583

 

第二种方式：vue 解决ie9的兼容问题

当vue遇见ie9的时候，部署到服务器之后，打开居然是一片空白，vue是支持ie9的，这个时候就需要来一波兼容了

1、首先npm install --save babel-polyfill

2、然后在main.js中的最前面引入babel-polyfill

      import 'babel-polyfill'

3、在index.html 加入以下代码（非必须）

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

4、在config中的webpack.base.conf.js中,修改编译配置

entry:{
    app:['babel-polyfill','./src/main.js']      
}

本地文件：E:\www\svn\project\vue_manage_test

 

当然，如果你只用到了 axios 对 promise进行兼容，可以只用 es6-promise

 

npm install es6-promise --save

在 main.js 中的最前面 引入

import 'es6-promise/auto'

完成以上配置，ie9兼容就完成了

解决vue在ie9中的兼容问题     https://blog.csdn.net/landl_ww/article/details/79149461

 vue-cli2、vue-cli3配置babel 兼容低版本安卓5.0： https://blog.csdn.net/Maggie_01/article/details/101159448?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4.pc_relevant_default&spm=1001.2101.3001.4242.3&utm_relevant_index=7