vue-cli3下,配置对于ES6的兼容.基本都是用 browserslist,babel-polyfill等
一.解决步骤 1.配置browserslist 配置这一项,有两个途径,一是 在 package.json文件中,添加browserslist字段;二是 在项目根目录,创建一个.browserslistrc文件,两种途径。这两种方法不能同时配置,不然运行serve命令会报错。 先说package.json中配置,网上很多如下方法: "browserslist": [ "> 1%", "last 4 versions" ] 本人依此配置,报错!然后按照另外一种配置,如下: "browserslist": [ "ie 11" ] 成功! 额外贴出.browserslistrc方法配置方式(只是列出书写方式,代码有效性,按上面来): > 1% last 4 versions 2.安装babel-polyfill依赖 这个简单,直接 npm i babel-polyfill --save-dev即可 3.引入babel-polyfill依赖 这一步是关键,网上查询很多,在main.js中,import babel-polyfill引入,本人测试后无效。 具体引入是在vue.config.js中configureWebpack字段中,具体: configureWebpack: config => { config.entry.app = [[color=#dd1144]"babel-polyfill"[/color], [color=#dd1144]"./src/main.js"[/color]]; } 即在webpack入口配置中,加入babel-polyfill。至此,在ie下,兼容es6就解决了! 二.自己的理解 上面把问题解决了,再将自己解决过程中的理解梳理下。 1.首先上面的解决步骤,仅仅适用于源码(/src),对依赖包无效。当需要对依赖包做兼容转译时,就需要用到官网中Polyfill部分内容了 2.vue-cli中webpack配置文件是在node_modules中的,没有直接在根目录,要想配置webpack,需要在vue.config.js中configureWebpack字段或者chainWebpack配置。具体如下: module.exports = { configureWebpack: { resolve: { alias: { querystring: 'querystring-browser' } } } } module.exports = { chainWebpack: config => { config.resolve.alias.set('querystring', 'querystring-browser') } }解决过程中,查询的相关资料 1.Vue 兼容 ie9 的全面解决方案 2.Vue CLI 3 浏览器兼容性配置 3.Editing webpack.config.js when using vue-cli 3 参考:https://segmentfault.com/a/1190000019525892?utm_source=tag-newest |
|
|
沙发#
发布于:2019-09-11 09:14
按着操作了一遍,ie9和ie10还是报语法错误SCRIPT1002,页面出不来啊,具体还需要什么操作吗?
|
|