html页面直接引入vue.js+element ui后,解决ie浏览器兼容性_html页面直接引入element后,ie浏览器兼容性问题-程序员宅基地

技术标签: vue  前端  es6  js学习日记  javascript  

因为在项目中临时增加两个页面,就没有用 vue-cli 搭框架,直接在 HTML 中引入vue.js 文件。发现其他浏览器都能正常显示,ie 下显示不正常,vue部分没有编译。

IE不兼容Vue的原因无非就是编译不了高于ES5的语法,因此解决IE的兼容问题就要将项目中的高级语法转化为IE可以编译的ES5语法。

在 vue-cli 中,ie 浏览器下不显示,需要下载安装 babel-polyfill(npm i babel-polyfill),同样的,在 html 中使用 vue 的语法时,也需要引入 babel 和 polyfill。

具体步骤:

  1. 下载文件到本地,并且放到自己的 js 文件中;
    (1)browser.min.js 源码 : https://blog-static.cnblogs.com/files/gxsyj/browser.min.js
    (2)polyfill.min.js 源码:https://blog-static.cnblogs.com/files/gxsyj/polyfill.min.js

  2. 一定要在引入 vue.js 之前就引入这两个文件。

<script src="../js/browser.min.js"></script>
<script src="../js/polyfill.min.js"></script>
  1. 在 script 标签中 添加 type=“text/babel”。这里只需要将含有转换es5语法的script标签添加上就可以。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/babel">
  new Vue({
    
    el: '#app',
    data: function() {
    
      return {
     
        visible: false,
        tableData: []
      }
    },
    methods:{
    
    }
  })
</script>

4.如果页面中涉及了axios请求,可能出现请求中中文参数乱码现象。

解决方式:

在前端页面中,将参数进行一次encodeURI编码,

axios.get('http://192.127.0.1:8080?jcyUnit'+encodeURI(encodeURI('需转码的文字')))
	.then((res)=>{
    
		console.log(res)
	 })
							 
	}).catch(function (error) {
    
		 console.log(error); 
	});

在后端页面中,需要进行解码 jcyUnit = URLDecoder.decode(jcyUnit,“utf-8”);

try {
    
	jcyUnit = URLDecoder.decode(jcyUnit,"utf-8");
		} catch (Exception e) {
    
		// TODO Auto-generated catch block
		e.printStackTrace();
	}

附:在vue-cli工程项目中的解决方案(网上搜的,没有测试)

1.vue-cli2.0项目

1.安装babel-polyfill 执行以下命令,重启服务器: npm install --save babel-polyfill

2.在main.js引入 polyfill import 'babel-polyfill'

3.在webpack.base.conf.js中配置 polyfill: entry: {
    app: ['babel-polyfill','./src/main.js'] },

2.vue-cli3.0项目

1.安装babel-polyfill依赖  npm i babel-polyfill --save-dev

2.在src同级目录下新建vue.config.js文件配置如下
 module.exports = {
     	configureWebpack:{
     	// 其他配置 	},
        chainWebpack: config => {
    
        // 其他配置
        config.entry('main').add('babel-polyfill') // main是入口js文件
        // 其他配置    } }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_47152783/article/details/117468063

智能推荐

python入门指南txt-【杂谈】爬虫基础与快速入门指南-程序员宅基地

文章浏览阅读168次。今天给大家分享一下网络爬虫的基础知识,以及一些优秀的开源爬虫项目。网络爬虫主要是我们在面对新的任务,但自己又没有数据的时候,获取自己想要的数据的一种手段。因此我们有必要掌握一定的爬虫知识,从而更好的准备训练数据集。作者 | 言有三编辑 | 言有三1 前端网页基础在介绍爬虫之前我们先介绍一下网页基础,理解前端网页有利于我们对后面爬虫的学习,它是爬虫的基础之一。1.网页构成通常来说网页由三部分组成,分..._python入门指南 小说 txt

已解决java.lang.NullPointerException异常的正确解决方法,亲测有效!!!_tinyumbrella安装java.lang.nullpointerexception-程序员宅基地

文章浏览阅读5.3w次,点赞22次,收藏20次。在Java编程中NullPointerException是最常见的运行时异常之一,这种异常在我们访问一个空引用变量中的字段、方法或者对象时会触发。_tinyumbrella安装java.lang.nullpointerexception

如何为微信小程序添加微信支付和小程序支付功能-程序员宅基地

文章浏览阅读120次。获取微信支付相关信息 审核通过后,可以获取到一些重要的信息,包括商户号(mch_id)、密钥(key)、AppID(appid)、AppSecret(appsecret)等。处理支付回调 在用户支付成功后,微信会将支付结果通知到一个指定的URL中。我们需要在自己的服务器上处理这个支付结果,以便更新订单状态等。注册微信商户号 首先,需要在微信支付平台上注册一个微信商户号。生成签名 在发起支付请求之前,需要对请求参数进行签名。在实际的开发中,需要根据自己的业务需求进行参数的设置和处理。

LiteOS内核教程04 | 信号量(用于任务间同步)_信号量如何控制任务间的同步关系-程序员宅基地

文章浏览阅读1.5k次,点赞2次,收藏4次。本文首发于公众号『mculover666』,在学习本教程的过程中,可以登录华为云论坛小熊派板块进行发帖交流!1. LiteOS内核的信号量1.1.信号量在多任务操作系统中,不同的任务之间需要同步运行,信号量功能可以为用户提供这方面的支持。信号量(Semaphore)是一种实现任务间通信的机制,实现任务之间同步或临界资源的互斥访问。1.2. 信号量的使用方式信号量可以被任务获取或者申请..._信号量如何控制任务间的同步关系

Koa-MiniProgram:构建微信小程序的高效框架-程序员宅基地

文章浏览阅读282次,点赞3次,收藏7次。Koa-MiniProgram:构建微信小程序的高效框架项目地址:https://gitcode.com/ikcamp/koa-miniprogramKoa-MiniProgram 是一个基于 Koa 的微信小程序开发框架,它旨在提升小程序开发效率和代码可维护性。通过利用 Koa 的中间件机制,你可以更方便地组织业务逻辑,让代码结构更加清晰。技术分析中间件机制Koa 的核心在于它的中间件...

C语言-最小生成树(Kruskal算法)_6-1 最小生成树(克鲁斯卡尔算法) c语言-程序员宅基地

文章浏览阅读1.1w次,点赞45次,收藏340次。创建边集图(CreateEdgeGraph)打印图(print)排序函数(sort)顶点下标查找函数(LocateVex)查找双亲函数(FindRoot)克鲁斯卡尔算法(MiniSpanTree_Kruskal)克鲁斯卡尔算法简单的来说就是:每次选取最短边,但不能构成回路。克鲁斯卡尔算法的关键用那种方式存储图才合适?如果用邻接矩阵和邻接表,每次寻找最短边都要搜索所有边,故邻接矩阵和邻接表均不合适!改进图的存储:边集数组。EdgeGraph中包含了两个数组和顶点数、边._6-1 最小生成树(克鲁斯卡尔算法) c语言

随便推点

前端模拟列表的数组数据进行筛选_微信h5页面列表前端按列筛选-程序员宅基地

文章浏览阅读279次。前端模拟列表的数组数据进行筛选_微信h5页面列表前端按列筛选

重庆成人自考本科学校重要吗?-程序员宅基地

文章浏览阅读188次。自考选择主考院校一定要弄清楚报考院校毕业的规定,学士学位的规定。有些报考院校会有额外的规定,比如毕业论文优良,或者高于中等水平的平均成绩。

[FAQ21281]android P分区表中odmdtbo与dtbo分区的说明-程序员宅基地

文章浏览阅读552次。1. 对于需要OTA(O to P)升级到P版本的Project,分区layout必须与O版本完全一致,因此,请配置。虽然android P分区表中可以同时看到odmdtbo与dtbo分区,但实际上,ptgen在build生成的。Android O版本odmdtbo.img,在Android P版本改名成dtbo.img。此时build会生成odmdtbo.img,对应下载到odmdtbo分区。此时build会生成dtbo.img,对应下载到dtbo分区。_odmdtbo

vscode中配置.wxss和.wxml语法高亮和不全插件_vscode检查wxml语法-程序员宅基地

文章浏览阅读9.5k次。vscode默认无法识别wxml和wxss语法, 1、打开编辑器,选择微信文件,点击右下角的纯文本。然后选择相应匹配的识别格式,css和htmlimage.png但是强大的vscode自然有解决办法,我们点击纯文本会发现image.png所以我们只要将wxml关联成html就可以语法高亮了..._vscode检查wxml语法

大数据技术未来发展前景及趋势分析_大数据技术的发展方向-程序员宅基地

文章浏览阅读5.7k次。流大数据分析Storm: Apache Storm是一种开源的分布式实时计算系统。Storm加速了流数据处理的过程,为Hadoop批处理提供实时数据处理。Spark: Spark是一个兼容Hadoop数据源的内存数据处理平台,运行速度相比于HadoopMapReduce更快。Spark适合机器学习以及交互式数据查询工作,包含Scala、Python和Java API,这更有利于开发人员使用..._大数据技术的发展方向

Abaqus学习-初识Abaqus(悬臂梁)_abaqus悬臂梁-程序员宅基地

文章浏览阅读2k次,点赞2次,收藏8次。调整为HyperViewmo模式,使用Ctrl+鼠标键进行移动放大旋转PartpropertyAbaqus有自己的单位体系,在输入数值时不用带单位将材料赋给悬臂梁,为建立set,选中悬臂梁中键确认装配即使一个元件也要装配,此处只需点击创建和OK即可。Step创建step-1,此处默认即可;建立输出S/U接触-无Load-施加载荷和约束,载荷不可加到初始步,边界条件可以Mesh-网格的质量对计算结果十分钟重要布种赋予网格类型此处默认此处默认Mech._abaqus悬臂梁