最近做了一个基于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. BZOJ 1189 【HNOI2007】 紧急疏散evacuate

    题目链接:紧急疏散 这薄脊题我代码不知不觉就写长了…… 这道题二分答案显然,然后用最大流\(check\)即可.设当前二分的答案为\(x\),那么把每扇门拆成\(x\)个点,第\(i\)个代表在第\( ...

  2. SPOJ - INTSUB 数学

    题目链接:点击传送 INTSUB - Interesting Subset no tags  You are given a set X = {1, 2, 3, 4, … , 2n-1, 2n} wh ...

  3. Django2.0 URL配置

    一.实例 先看一个例子: from django.urls import path from . import views urlpatterns = [ path('articles/2003/', ...

  4. Qt5_程序发布

    ZC: deploy ==> 部署 1.文件夹platforms 该文件夹 来自 Qt安装目录:F:\ZC_software_installDir\Qt5.3.2_vs2010\5.3\msvc ...

  5. [.NET开发] NPOI导出

    //导出全部 expertPara = GetExpetPara(); expertPara.BeginIndex = pager.CurrentPageIndex; expertPara.EndIn ...

  6. Loading Xps from MemoryStream

    A common way of loading XpsDocument is to load it from file: XpsDocument document = new XpsDocument( ...

  7. 20161227xlVBA多文件合并计算

    Sub NextSeven_CodeFrame() '应用程序设置 Application.ScreenUpdating = False Application.DisplayAlerts = Fal ...

  8. 『Re』知识工程作业_主体识别

    作业要求 环境路径 类似于这样的,一共50篇文档, 均为中文文档,是法院判决书的合集. 程序 程序如下,我完全使用正则表达式来实现功能, import re import glob import co ...

  9. JavaScript In OA Framework

    原文地址:JavaScript In OA Framework (需FQ) “To be or not to be…… is the question…..!” The famous soliloqu ...

  10. kaptcha验证码使用

    参数配置: Constant 描述 默认值 kaptcha.border 图片边框,合法值:yes , no yes kaptcha.border.color 边框颜色,合法值: r,g,b (and ...