欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

如何把vue3 中的 es6规范的代码,编译为es5规范的老的浏览器可以用的代码

最编程 2024-02-22 16:44:53
...

如何把vue3 中的 es6规范的代码,编译为es5规范的老的浏览器可以用的代码
解决老手机H5 白屏或无法解析ES6规范的代码

//vue.config.js
module.exports = {
     ...,
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                }
            ]
        }
    },
    transpileDependencies: ['element-ui', 'echarts', 'highcharts', 'highcharts-3d', 'screenfull', 'oidc-client', 'vuex-oidc','vant']
};

//package.json
 { 
 ...,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie <=6",
    "Android >= 4",
    "iOS >= 7",
    "Chrome 40.0"
  ]
}

//babel.config.js
module.exports = {
    "presets": [
        ["@vue/cli-plugin-babel/preset"],
        ["@babel/preset-env", {
            "modules": false,
            "targets": {
                "browsers": [
                    "> 1%",
                    "last 2 versions",
                ]
            }
        }]
    ],
    "plugins": []
}

更改完后重新编译,然后查询是否有 let ,=》 这种es6标准的符号,如果没有说明转es5成功