Vue（七）：Vue项目兼容IE11（解决第三方依赖打包后IE报错问题）

写在开头

不建议使用IE win7 XP 等微软已经放弃支持的产品
不建议用户过着原始人的生活

创建项目

node版本
vue版本 - 安装所需

打包

直接打包，将打包后的文件夹放到vscode中，使用GoLive插件运行项目，然后用IE打开发现能正常运行。
但是创建一个项目不可能什么第三方都不安装。

示例：安装`echarts` `vue-echarts`

npm install echarts vue-echarts

引用插件

// main.js
···
import 'echarts';
import ECharts from 'vue-echarts/components/ECharts.vue';
Vue.component('v-chart', ECharts);
···

使用

<!-- HelloWorld.vue -->
<template><div class="hello"><h1>{{ msg }}</h1><div style="height: 500px;"><v-chart :options="option" autoresize style="width: 100%;height: 100%;"></v-chart></div></div>
</template>
<script>
export default {name: 'HelloWorld',props: {msg: String},data(){return {option: {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(220, 220, 220, 0.8)'}}]}}}
}
</script>

然后重复打包步骤，发现IE打开报错

处理兼容问题

在项目根目录创建vue.config.js文件，进行项目配置

// vue.config.js
module.exports = {transpileDependencies:['vue-echarts', 'resize-detector'],
}

再次进行打包步骤，IE展示正常，兼容处理成功

Vue（七）：Vue项目兼容IE11（解决第三方依赖打包后IE报错问题）相关推荐

接上一篇：【Vue 项目打包后访问报错：Uncaught TypeError: Cannot read property 'call' of undefined】
上一篇:Vue 项目打包后访问报错:Uncaught TypeError: Cannot read property 'call' of undefined 其实在修改 webpack.prod.co ...
如何解决Maven依赖本地仓库eclipse报错的问题
一.应用场景为了使用maven强大的包依赖管理和项目管理功能,故在项目中使用maven2作为项目建构工具.但是我的项目在内网构建,为了能使用maven2,只能使用本地仓库依赖策略.但是,有时候明明本 ...
【解决】MacOS下 Python3.7 使用 pyinstaller 打包后执行报错 Failed to execute script pyi_rth__tkinter...
Fix tcl/tk libs inclusion in tkinter with Python3.7 under MacOS 使用 Pyinstaller 打包时候报错 3027 ERROR: Tc ...
Maven工程解决pom依赖红色波浪线报错
在idea中执行Maven编译命令看编译是否有问题; mvn clean test-compile 版本有问题或没指定版本号: 问题纠正后编译成功:
尚硅谷在线教育项目P132修改pom.xml等文件后依然报错not found
原因: 虽然springboot默认加载resources中的文件,但是似乎在pom文件中指定了资源加载路径后,springboot的默认设置就失效了,必须在pom文件中一起指定application ...
VUE项目兼容IE11 遇见的问题 SyntaxError: strict 模式下不允许一个属性有多个定义；ie11下载excel文件需要用navigator.msSaveBlob
最近要把vue项目兼容ie11 前面引入bable等一系列操作就不说了,下面说一下具体具体的问题 1 如图所示 SyntaxError: strict 模式下不允许一个属性有多个定义, 点击sta ...
为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
Vue项目上线后刷新报错404问题（apache，nginx，tomcat）
一. Vue项目打包发布apache报错: route,配置一个覆盖所有的路由情况 1.需要修改router/index.js中new Router 配置,加一个base: '/htcm_front/ ...
vue 解决重复点击导航路由报错问题
// 解决重复点击导航路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function pu ...

Vue（七）：Vue项目兼容IE11（解决第三方依赖打包后IE报错问题）

写在开头

创建项目

打包

示例：安装`echarts` `vue-echarts`

处理兼容问题

Vue（七）：Vue项目兼容IE11（解决第三方依赖打包后IE报错问题）相关推荐

最新文章

热门文章

Vue（七）：Vue项目兼容IE11（解决第三方依赖打包后IE报错问题）

写在开头

创建项目

打包

示例：安装echarts vue-echarts

处理兼容问题

Vue（七）：Vue项目兼容IE11（解决第三方依赖打包后IE报错问题）相关推荐

最新文章

热门文章

示例：安装`echarts` `vue-echarts`