最近做了一个基于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. Python matplot画柱状图(一)

    图的存在,让数据变得形象化.无论多么复杂的东西,都是简单的组合. import matplotlib.pyplot as plt import numpy as np dict = {'A': 40, ...

  2. stat用法:获取文件对应权限的数字

    题目:文件属性为-rw-r--r-- 对应权限为644,如何使用命令获取权限对应的数字?? 举例如下: [linuxidc@localhost ~]$ ll -l-rw-r--r-- 1 linuxi ...

  3. 哈希表-java

    import java.util.HashMap; import java.util.Iterator; public class JavaHashMap { public static void m ...

  4. stack_01

    A.添加/移除 A.1.void stack::push(elemValue); // 栈头 添加元素 A.2.void stack::pop(); // 栈头 移除第一个元素 B.随机存取 C.数据 ...

  5. 使用R的数据库查询

    JS 很多方法可以用R查询数据.这篇文章展示了三种最常见的方法: 运用 DBI 使用dplyr语法 使用R note book 背景 最近的一些软件包改进可以更轻松地将数据库与R一起使用.下面的查询示 ...

  6. jq的attr()与prop()之间区别

    1.attr() 一直存在,prop() 仅存在于 jq-1.6 及其之后 2.新版本jq使用细节: 2.1 自定义添加至dom节点的属性,用attr获取 2.2 表单类checked.selecte ...

  7. 安装gcc4.8.5

    安装gcc4.8.51. g++ --version, 4.4.7不支持c++112. 升级gcc-c++, 下载gcc    https://gcc.gnu.org/ 官网,镜像下载地址https: ...

  8. Contiguous Array with Equal Number of 0 & 1

    2018-07-08 13:24:31 问题描述: 问题求解: 问题规模已经给出是50000量级,显然只能是O(n),至多O(nlogn)的复杂度.本题使用DP和滑动数组都比较棘手,这里给出的方案是p ...

  9. pip 源 替换国内源

    网上收集来的pip源地址: 阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simp ...

  10. php--------使用js生成二维码

    php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...