当vue遇见ie9的时候,部署到服务器之后,打开居然是一片空白,vue是支持ie9的,这个时候就需要来一波兼容了
参考尤大的解答 https://github.com/vuejs-templates/webpack/issues/260
- 首先npm install --save babel-polyfill
- 然后在main.js中的最前面引入babel-polyfill
import 'babel-polyfill'
- 在index.html 加入以下代码(非必须)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- 在config中的webpack.base.conf.js中,修改编译配置
entry:{
app:['babel-polyfill','./src/main.js']
}
当然,如果你只用到了 axios 对 promise进行兼容,可以只用 es6-promise
npm install es6-promise --save
完成以上配置,ie9兼容就完成了
那么,就有一个问题了,build之后的dist文件只有放在服务器上才能查看,但本地如何查看呢,参考一下配置
- 修改config文件夹中的index.js文件,将build对象中的打包路径,'/‘改为'./',由绝对路径改为相对路径,建议将sourceMap改为false,编译的时候会快一点
build: { assetsPublicPath: './', productionSourceMap: false, }
- 修改完之后,重新 npm run build ,得到新的dist文件夹
- 然后进入dist文件夹
cd dist
- 全局安装简易node服务器
npm install http-server -g
- 启动简易node服务器
http-server
-
出现如下图所示,就代表你的服务器启动成功了,那你也能在5000端口查看编译打包后的项目了,可以在ie浏览器中直接测试了
image.png
另外:
只在兼容ie9环境运行css或js
<!--[if lt IE 9]-->
<style lang="less">
.el-aside{
height: 100%;
float: left;
}
</style>
<!--[endif]-->
<!--[if lt IE 9]-->
<script></script>
<!--[endif]-->
if (window.navigator.userAgent.indexOf('MSIE 8.0') >= 1) {
//如果浏览器为IE8
alert('您的浏览器版本不支持此页面,您该更新浏览器了')
}
if (window.navigator.userAgent.indexOf('MSIE 9.0') >= 1) {
//如果浏览器为IE9
alert('您的浏览器版本不支持此页面,您该更新浏览器了')
}
vue中 elementUI 的 ie9 兼容问题
- 可能的原因1,element-ui 中使用了 display: flex; 样式,IE9不支持次样式,解决方法为,排查下各组件,避免使用带 display: flex; 的组件(
ie10以上没问题
) - 可能的原因2,IE9浏览器过于老旧,单文件最大行数超过一定限制将不再读取后边的内容,因此可以尝试分割css文件和打包的js文件
2.1. 分割js文件,最好的方法是采用vue的路由懒加载,这样打包时,vue-loader会把每个路由对应的js文件打包在一起。同时注意组件的合理划分,避免单组件体积过大,并提高组件的复用性
2.2. 分割css文件,通过yarn add css-split-webpack-plugin -D安装css-split-webpack-plugin包来分割组件,修改webpack.prod.conf.js文件
// 引入依赖
var CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default
// 在css打包插件后面新增css分割插件
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// 新增的css分割插件
new CSSSplitWebpackPlugin({
size: 4000,
filename: utils.assetsPath('css/[name]-[part].[ext]')
}),
网友评论