html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决

筹备工作

//借助插件

npm install babel-plugin-import --save-dev

// .babelrc

{

"plugins": [["import", {

"libraryName": "view-design",

"libraryDirectory": "src/components"

}]]

}

在main.js中引入

import "view-design/dist/styles/iview.css";

import { Button, Table } from "view-design";

const viewDesign = {

Button: Button,

Table: Table

};

Object.keys(viewDesign).forEach(element => {

Vue.component(element, viewDesign[element]);

});

先用google浏览器关上失常，以上操作猛如虎，IE浏览器关上250，好了不废话，上面是解决方案

解决方案

//vue.config.js中配置

chainWebpack: config => {

//解决iview 按需引入babel转换问题

config.module

.rule("view-design") // 我目前用的是新版本的iview ,旧版本的iview，用iview代替view-design

.test(/view-design.src.*?js$/)

.use("babel")

.loader("babel-loader")

.end();

}

问题起因

为什么会有如上问题呢? 这个就和babel转换问题无关了，按需引入时，那些组件里js文件未进行babel转换或转换不彻底就被引入了，ie11对es6+的语法反对是很差的，所以以上办法就是让引入文件前就对view-design的src下的所有js文件进行babel转换，触类旁通，当按需引入第三方框架时呈现这个问题，都可用这办法解决了，只有把规定和正则中view-design进行替换。

延长扩大

//全局引入

import ViewUI from "view-design";

Vue.use(ViewUI);

import "view-design/dist/styles/iview.css";

tips:在全局引入时，肯定要记住不要在.babelrc文件里配置按需导入，会导致抵触

html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决相关推荐

iview 按需引入解决加载慢的问题
iview 按需引入解决加载慢的问题参考文章: (1)iview 按需引入解决加载慢的问题 (2)https://www.cnblogs.com/ToBeBest/p/9645126.html 备忘 ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
vue-cli3 按需引入element-ui
按照官网的教程:按需引入需要借助:babel-plugin-component 安装:babel-plugin-component 注意:官网是修改 .babelrc 文件,我这里为了方便就直接修改 ...
The Last Naruto,兼容IE11的vue脚手架
摘要 the-last-naruto是一个基于Vue@2.7和Vite@3的一个项目模板(支持IE11浏览器),灵感来源自antfu大佬的vitesse-lite.旨在给项目上还需要支持IE11浏览器 ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue 初始化方法_Vue源码解读（一）引入Vue做了什么
本系列文章都是vue版本2.6.11,也就是vuecli3的对应的vue的版本学习一门技术的源码首先当然是从它的入口开始学习,在这里我先扩展一下从引入vue到入口都讲一下首先看下node_modu ...
vue项目中按需引入viewUI
viewUI 一.按需引入二.忽略eslint编译器检测和编译检测 1.忽略编译器检测 2.编译器中忽略一.按需引入 npm install babel-plugin-import --save- ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
vue.js项目中，关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...

html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决

html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决相关推荐

最新文章

热门文章