最近做了一个基于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. hdu 5524 Subtrees dfs

    Subtrees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Probl ...

  2. python 字符串输出转义{}

    >>> print ("{} 对应的位置是 {{0}}".format("runoob")) runoob 对应的位置是 {}

  3. Python day19 模块介绍3(sys,json,pickle,shelve,xml)

    1.sys模块 import sys sys.path()#打印系统path sys.version()#解释程序版本信息 sys.platform()#系统平台 sys.exit(0)#退出程序 c ...

  4. WM_COPYDATA

    1. WM_COPYDATA : https://msdn.microsoft.com/en-us/library/windows/desktop/ms649011(v=vs.85).aspx COP ...

  5. 在ANE插件中启动AIR开发的Android应用

    在Android原生应用开发中,启动一个应用非常容易: Intent __intent = new Intent(this, YourAppActivity.class); startActivity ...

  6. URAL 1513 Lemon Tale

    URAL 1513 思路: dp+高精度 状态:dp[i][j]表示长度为i末尾连续j个L的方案数 初始状态:dp[0][0]=1 状态转移:dp[i][j]=dp[i-1][j-1](0<=j ...

  7. 一分钟搞定:spring boot 热部署 (基于Idea)

    什么是热部署? 对于spring boot项目,修改后台的java类,不要重启整个项目,就可以测试/使用刚修改的功能! 怎么为项目添加/设置热部署 maven项目在pom.xml添加下方代码,联网引入 ...

  8. 关于一致性hash详细

    一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简 单哈 ...

  9. Maven部署web应用到远程服务器

    Maven部署web应用到远程服务器 找到了一个很详细的地址:http://www.mkyong.com/maven/how-to-deploy-maven-based-war-file-to-tom ...

  10. 27 网络通信协议 tcp udp subprocess

    1.模块subprocess import subprocess cmd_str = input('请输入指令>>>') sub_obj = subprocess.Popen( cm ...