vue的兼容问题
在项目开始的时候，要先确定项目是否兼容到 IE8 及一下的版本，因为vue支持 IE8 以及更低版本 。
1、ES6语法不支持
解决方法：
引入babel-polyfill
npm install --save bable-polyfill
webpack.base.conf.js中修改为
app: ['event-source-polyfill', 'babel-polyfill', './src/main.js']
main.js 中引入
import 'babel-polyfill';
2、GET非首次请求时，IE默认使用缓存而不是去后台请求
解决方法：
在request拦截时，加时间戳
service.interceptors.request.use(config => {
// Do something before request is sent
// // 时间戳
if (config.method === 'get') {
config.params = {
t: Date.parse(new Date()) / 1000,
...config.params
}
}
return config;
}, error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
})
3、上传文件时，文件类型检查。如果为.apk文件，则file.type为" ".而jpg/png等文件正常
导致上传apk文件时，会报类型检查错误
解决方法：
export function validateApk(file) {
if (file.type === 'application/vnd.android.package-archive') {
return true;
} else {
if (file.name.substring(file.name.lastIndexOf('.') + 1) === 'apk') {
return true;
}
}
return false;
}
4、上传文件时，后台读取file.getName或者file.getOriginalName为全路径名称
解决方法：
后台去处理，如果为全路径，则进行字符串截取
vuex在IE11的兼容问题
IE11没有内置promise，所以用不了vuex很正常。为了兼容，首先要安装一个库。
安装好之后在main.js中引入
然后在build中配置一下入口entry即可
用vue2.0开发做兼容时，你可能会发现vue项目在IE11版本浏览器中是空白的。。。看到空白的页面你可能会懵逼几秒钟，没事，下面我们就来解决这个问题~
如何让IE11支持vue2.0
首先用npm 安装babel-polyfill
npm install --save-dev babel-polyfill
1
然后在webpack.base.conf.js 文件中修改 module.exports 中的entry，添加 babel-polyfill:
修改前
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
...
123456
修改后
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill', './src/main.js']
},
...
123456
然后再main.js中引入：
import 'babel-polyfill'
1
完成上述一系列操作之后，在IE11浏览器中重新跑下项目，你就会发现，你辛苦做的页面出现了！
但是页面有可能还会没有出现！！！，这时首先查看控制台，看看是否报错，根据报错情况查找原因。在这说再一个特别的原因，static下的js文件中用了ES6的语法，针对这个问题，解决方法如下：
在webpack.base.conf.js文件中添加resolve('static')
修改前：
module: {
rules: {
...
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
...
}
}
1234567891011
修改后：
module: {
rules: {
...
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('static'), resolve('node_modules/webpack-dev-server/client')]
},
...
}
}
1234567891011
但是如果你的项目中有router-link标签的话，点击一下你会发现，嗯，又出问题了，路由无法跳转，这是千万不要荒，稳住，下面解决这个问题。
IE11上router-link无法跳转，主要是因为当url的hash change的时候，浏览器没有做出相应。这时候需要做一个兼容，当浏览器是IE11时手动给url加一个hashChange事件
下面是在网上找的两种方法
第一种：
new Vue({
el: '#app',
router,
store,
template: '<Layout/>',
components: { Layout },
render: function (createElement) {
if ('-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style) {
window.addEventListener('hashchange', () => {
var currentPath = window.location.hash.slice(1)
if (this.$route.path !== currentPath) {
this.$router.push(currentPath)
}
}, false)
}
return createElement(Layout);
}
})
123456789101112131415161718
第二种：直接添加在 main.js 入口文件的最后即可
if (
'-ms-scroll-limit' in document.documentElement.style &&
'-ms-ime-align' in document.documentElement.style
) { // detect it's IE11
window.addEventListener("hashchange", function(event) {
var currentPath = window.location.hash.slice(1);
if (store.state.route.path !== currentPath) {
router.push(currentPath)
}
}, false)
}