写在开头
不建议使用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';ponent('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.jsmodule.exports = {transpileDependencies:['vue-echarts', 'resize-detector'],}
再次进行打包步骤,IE展示正常,兼容处理成功