快捷導(dǎo)航

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

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

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

讓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瀏覽器中重新跑下項(xiàng)目，你就會(huì)發(fā)現(xiàn)，你辛苦做的頁(yè)面出現(xiàn)了！

但是頁(yè)面有可能還會(huì)沒有出現(xiàn)！??！，這時(shí)首先查看控制臺(tái)，看看是否報(bào)錯(cuò)，根據(jù)報(bào)錯(cuò)情況查找原因。在這說再一個(gè)特別的原因，static下的js文件中用了ES6的語法，針對(duì)這個(gè)問題，解決方法如下：

在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')]
? ? ? },
? ?? ?...
? }
}

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

IE11上router-link無法跳轉(zhuǎn)，主要是因?yàn)楫?dāng)url的hash change的時(shí)候，瀏覽器沒有做出相應(yīng)。

這時(shí)候需要做一個(gè)兼容，當(dāng)瀏覽器是IE11時(shí)手動(dòng)給url加一個(gè)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)
}