如题，背景就不介绍了，项目是前后端不分离的，这让我一个转行前端对JSP语法不熟的人来说写起来着实难受。后来加了个考试的新功能，果断引入vue和element，还有polyfill.js，因为要兼容IE9。刚开始写的时候vue和elememt都是引的cdn上的资源，但是我们项目只能使用内网，所以需要将vue和element下载到本地。从线上转到本地的过程中，遇到了一些坑，下面就来说一下。
cdn引用方式
//在head头部引入elementUI样式
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
// 在</body>前引入vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//然后是element，element引入时最好锁定版本号（@xx.xx）,css文件同js文件是相同版本。
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
// 最后引入polyfill来支持ie浏览器
<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>
这些都引用好后，项目就可以跑起来了，像es6语法、Promise等在IE9都能支持。
下面说一下vue、element等在本地的引用
Vue在本地JSP中的使用
JSP其实就是一个html文件，只不过有特定的语法。引用vue的方式和在html中没什么两样。
// JSP文件的特定格式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/content/include/taglib.jsp"%>
<html>
<head>
<title>JSP中引入vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
// 页面内容
</div>
// 引入vue
<script src="./vue2.6.12/vue.js"></script>
<script src="引入Jquery"></script>
<script type="text/javascript">
// 在页面加载好后就初始化vue实例,也可以在外面直接初始化
$(document).ready(function(){
const vm = new Vue({
el:'#app',
data(){
return {
msg:''
}
},
methods:{}
})
})
</script>
</body>
</html>
这样就可以愉快的使用vue了。
element的引入
element下载也很简单，在官网的链接里就能去到cdn上，然后选择版本进行下载。
我们需要的文件都在lib文件夹内 element-ui/lib/index.js element-ui/lib/theme-chalk/index.css
下载好后将它们引入到项目中，vue.js要放到element JS文件的前面，因为element是基于vue的。引用成功后项目是跑起来了，但是element的图标没有显示出来，通过浏览器查看是没有找到woff字体。
通过查看index.css也能看到引用了字体文件
在element-ui/lib/theme-chalk文件夹下有个fonts 文件夹，把里面的文件下载下来，然后在index.css同级的文件夹新建一个fonts文件夹，把下载好的两个字体文件放进去就OK了。这时候刷新页面，图标就出来了。
这里放上我的资源：[vue+element+babel资源下载](链接：https://pan.baidu.com/s/1n3Q4ngjSGZ2g-hgU1uH5CA
提取码：okt7
–来自百度网盘超级会员V6的分享）
百度网盘下载资源慢的可以去我github下载babel下载链接。
兼容IE9，引入browser.js和polyfill.js
以上步骤完成后，项目在chrome、火狐等浏览器中都表现正常。IE就不行了，页面加载不出来。因为IE不支持ES6语法（如果项目中没用es6，页面应该是可以加载出来的，但是ES6很香啊！），这时候就需要babel来将ES6转为ES5。cdn引用方式很简单，一个polyfill.js就够了，因为它会根据不同的浏览器加载不同的JS文件。本地引入要引两个文件才行，其中一个是将ES6转为ES5语法的，另一个是支持像Promise、Generator等ES6的新API的，我是折腾了不少时间才get到。
// JSP文件的特定格式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/content/include/taglib.jsp"%>
<html>
<head>
<title>JSP中引入vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%--引入elementUI样式 --%>
<link rel="stylesheet" href="${mss}/common/elementUI-2.14.0/css/index.css">
</head>
<body>
<div id="app">
// 容器，页面主要内容
</div>
// 引入browser 让低版本浏览器解析ES6语法
<script src="./babel-polyfill/browser.min.js"></script>
// 引入babel-polyfill 让低版本浏览器解析Promise等API
<script src="./babel-polyfill/polyfill.min.js"></script>
// 引入vue
<script src="./vue2.6.12/vue.js"></script>
// elementUI JS文件
<script src="./elementUI-2.14.0/index.js"></script>
<script src="引入Jquery"></script>
<script type="text/babel"> // 注意：这时type不能为text/javascript了，要改为text/babel,解析babel文件
// 在页面加载好后就初始化vue实例,也可以在外面直接初始化
$(document).ready(function(){
const vm = new Vue({
el:'#app',
data(){
return {
msg:''
}
},
methods:{}
})
})
</script>
</body>
</html>
需要注意的有两点：
1、本地引入browser.js和polyfill.js后script标签的type要改为type=text/babel，用cdn方式引入是不需要修改的。
2、js文件的引入顺序，babel–vue–element
---------------------------------------------------更新------------------------------------------------------
以上文件都引入后，在IE9上ES6语法都是支持的，页面都可以加载出来。但是CSS3的一些语法IE9,IE10是不支持的，比如flex布局，rotate，阴影等。我这个项目中使用了element的el-step组件，此组件就使用了flex布局，导致在IE9,IE10下显示不正常。IE10支持部分flex属性，IE11都是支持的。所以我们只要针对IE9，IE10浏览器调整css代码就可以了。我们单独写一份el-step的样式，当浏览器是IE9或IE10时就引入。在IE9、IE10上可以使用float和position来代替flex。
// forIE9.css 兼容IE9 IE10
.el-steps{
display: table;
width: 84%;
}
.el-steps .el-step{
display: table-cell;
width: 45%;
}
.el-step__head{
float: left;
}
.el-step__main{
position: relative;
}
.el-step__arrow{
position: absolute;
top: 3px;
left: 60%;
}
/*下拉选样式*/
.el-select__caret{ // select选择器的图标在ie9下显示不正常，IE9不支持transform: rotate(180deg)，前面加-ms前缀以进行元素转换
-ms-transform: rotate(180deg);
}
IE9和IE10在引用方式上也不一样，IE9可以用if condition语句，IE10则不支持此语句。
IE10和IE11有一个专门的属性-ms-high-contras。
IE9、IE10引用方式
<head>
<title>考试内容表管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%--浏览器为IE9时引入--%>
<!--[if IE 9]>
<link rel="stylesheet" href="${mss}/common/mss/css/forIE9.css" />
<![endif]-->
<%--浏览器为IE10、IE11时，利用媒体查询
也可以在style内部直接写样式，两种选择一个就行（我是用直接在style里写样式，用link引入的样式有点瑕疵，不知道什么原因）
--%>
<link media="all and (-ms-high-contrast: none), (-ms-high-contrast: active)" rel="stylesheet" href="${mss}/common/mss/css/forIE9.css">
// 直接在style内部写兼容样式
<style>
/* IE10、11不支持if条件的写法
IE10/11独有的属性，-ms-high-contrast，有两个值active或none，检测是否启用高对比度
浏览器为IE10、IE11时生效
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.el-steps{
display: table;
width: 84%;
}
.el-steps .el-step{
display: table-cell;
width: 45%;
}
.el-step__head{
float: left;
}
.el-step__main{
position: relative;
}
.el-step__arrow{
position: absolute;
top: 3px;
left: 60%;
}
}
</style>
</head>