最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上。

安装依赖
yarn add --dev @babel/polyfill 
在入口文件 main.js 引入依赖
import '@babel/polyfill';
修改 babel.config.js
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
};
修改 .browserslistrc
> 1%
last 2 versions
not ie <= 10
修改 vue.config.js

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。

module.exports = {
transpileDependencies: []
}

详细说明可参见官方文档https://cli.vuejs.org/zh/conf...

我在这里遇到一个问题,有的依赖不仅需要添加它自身到 transpileDependencies 中,还需要添加它的某些依赖到 transpileDependencies 中,如果官方文档中没有明确指出的话可能还是不能正确的配置。

这种情况我的解决方法是在 src 目录下新建一个 utils 目录,将依赖的js文件移到该目录下,然后引入该目录下的js文件。

Vue CLI 3 配置兼容IE10的更多相关文章

  1. @vue/cli的配置知道多少-publicPath,outputDir,assetsDir,indexPath,filenameHashing,configureWebpack,productionSourceMap

    vue.config.js的简单介绍 vue.config.js 是一个可选的配置文件, 在项目的 (和 package.json 同级的) 根目录中存在这个文件. 默认情况没有这个文件需要我们手动去 ...

  2. [Vue CLI 3] 配置解析之 parallel

    官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...

  3. [Vue CLI 3] 配置解析之 indexPath

    在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...

  4. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  5. [Vue CLI 3] 配置解析之 css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...

  6. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  7. vue cli 3 lintOnSave 配置有时无效问题

    一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...

  8. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  9. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

随机推荐

  1. 将正在使用的Ubuntu14.04 制作成镜像文件

    remastersys 是一个能够备份你的ubuntu系统的工具. 源码在github上能找到:Remastersys Source 可以直接 apt 安装: sudo add-apt-reposit ...

  2. vmstat命令中System下in cs 何时为高?

    https://superuser.com/ https://serverfault.com/ 良好状态指标 CPU利用率:User Time <= 70%,System Time <= ...

  3. STL_算法_06_遍历算法

    ◆ 常用的遍历算法: 1.1.用指定函数依次对指定范围内所有元素进行迭代访问.该函数不得修改序列中的元素 functor for_each(iteratorBegin, iteratorEnd, fu ...

  4. 关于python中的 “ FileNotFoundError: [Errno 2] No such file or directory: '……'问题 ”

    今天在学python时,在模仿一个为图片加上图标并移动到指定文件夹的程序时遇到“FileNotFoundError: [Errno 2] No such file or directory: '152 ...

  5. 学霸网站之NABC

    1.Need 本次学霸系统的设计是基于学长的版本,在此基础上,我们准备进一步完善已有版块,在用户信息管理.提问.搜索.分类.评论.个性化界面.用户反馈.娱乐.积分获取等方面加入新的功能. 一.用户信息 ...

  6. (转)netty、mina性能对比分析

    转自: http://blog.csdn.net/mindfloating/article/details/8622930 流行 NIO Framework netty 和 mina 性能测评与分析 ...

  7. Python -- Scrapy 命令行工具(command line tools)

    结合scrapy 官方文档,进行学习,并整理了部分自己学习实践的内容 Scrapy是通过 scrapy 命令行工具进行控制的. 这里我们称之为 “Scrapy tool” 以用来和子命令进行区分. 对 ...

  8. nginx反向代理和正向代理,优缺点

    http://blog.csdn.net/lishaojun0115/article/details/53200629 nginx反向代理代理的是服务器,正向代理代理的是客户端, 反向代理是客户点发送 ...

  9. android--------动画之进度条

    Android开发中在处理耗时工作的时候,例如:列表加载,大多数会有一个精度条加载的框,里面有一个像gif的图片在旋转一样. 效果图:   <!--     根标签为animation-list ...

  10. SQL2005 安装问题

    1. 单击“开始”,依次指向“程序”.“Microsoft SQL Server 2005”和“配置工具”,然后单击“SQL Server 外围应用配置器”. 2. 在“SQL Server 2005 ...