Vue2.0在IE11版本瀏覽器中的兼容性問題

更新時間：2023年04月04日 16:33:52 作者：pinbolei

這篇文章主要介紹了Vue2.0在IE11版本瀏覽器中的兼容性問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

讓IE11支持vue2.0

首先用npm 安裝babel-polyfill

npm install --save-dev babel-polyfill?

然后在webpack.base.conf.js 文件中修改 module.exports 中的entry，添加 babel-polyfill:

修改前

module.exports = {
? context: path.resolve(__dirname, '../'),
? entry: {
? ? app: './src/main.js'
? },
? ...

修改后

module.exports = {
? context: path.resolve(__dirname, '../'),
? entry: {
? ? app: ['babel-polyfill', './src/main.js']
? },
? ...

然后再main.js中引入：

import 'babel-polyfill'

完成上述一系列操作之后，在IE11瀏覽器中重新跑下項目，你就會發(fā)現(xiàn)，你辛苦做的頁面出現(xiàn)了！

但是頁面有可能還會沒有出現(xiàn)?。?！，這時首先查看控制臺，看看是否報錯，根據(jù)報錯情況查找原因。在這說再一個特別的原因，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')]
? ? ? },
? ?? ?...
? }
}

修改后：

module: {
? rules: {
? ?? ?...
? ?? ?{
? ? ? ? test: /\.js$/,
? ? ? ? loader: 'babel-loader',
? ? ? ? include: [resolve('src'), resolve('test'), resolve('static'), resolve('node_modules/webpack-dev-server/client')]
? ? ? },
? ?? ?...
? }
}

但是如果你的項目中有router-link標簽的話，點擊一下你會發(fā)現(xiàn)，嗯，又出問題了，路由無法跳轉(zhuǎn)，這是千萬不要荒，穩(wěn)住，下面解決這個問題。

IE11上router-link無法跳轉(zhuǎn)，主要是因為當url的hash change的時候，瀏覽器沒有做出相應。

這時候需要做一個兼容，當瀏覽器是IE11時手動給url加一個hashChange事件

下面是在網(wǎng)上找的兩種方法

第一種

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);
? }
})

第二種

直接添加在 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)
}