zoukankan      html  css  js  c++  java
  • vue兼容 安卓5.0及以下版本

    将es6转为es5

    下载插件 

    npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill 

    在main.js中引用

    import 'babel-polyfill'

    import Es6Promise from 'es6-promise'

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

    Es6Promise.polyfill()

    在项目根目录下新建 .babelrc 文件,跟 package.json 同级

    {

     "presets": ["@babel/preset-env"],
     "plugins": [
      "@babel/plugin-transform-runtime"
     ]
    }
    在babel.config.js文件中配置
    const plugins = [];
    module.exports = {
     presets: [
      [
       "@vue/app",
       {
        "useBuiltIns": "entry",
        polyfills: [
         'es6.promise',
         'es6.symbol'
        ]
       }
      ]
     ],
     plugins: plugins
    }

    在vue.congig.js中进行配置

    const webpack = require("webpack");
    const path = require('path');
    function resolve(dir) {
      return path.join(__dirname, '.', dir);
    }
      
     transpileDependencies: ['webpack-dev-server/client'],
        chainWebpack: config => {
            config.entry.app = ['babel-polyfill', './src/main.js'];
           
        },
    一般配置到这里就能解决白屏问题
     
    如果没有就把下面这段代码 放入 vue.config.js文件chainWebpack: config => { }中
     config.module.rule('compile')
                .test(/.js$/)
                .include
                .add(resolve('src'))
                .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
                        }]
                    ]
                })
     
  • 相关阅读:
    英语中容易混淆单词
    Centos7 中安装 Redis 6.0.6
    JAVA基础- 为啥 Integer 中100=100 为true 而200=200则为false
    Java面试BIO,NIO,AIO 的区别
    Maven 中 dependencyManagement 干嘛用的
    代理实现流程
    使用do...while的方法输入一个月中所有的周日
    JavaScript---while和do while的区别
    微信小程序和H5之间相互跳转
    微信小程序进入广告实现
  • 原文地址:https://www.cnblogs.com/zhangsong611/p/14871218.html
Copyright © 2011-2022 走看看