VueCli3中兼容IE11配置的艱苦歷程
由于目前項目是采用VueCli3 搭建的項目,對google,火狐、eage 、360等瀏覽器兼容不錯,但是對IE確出現(xiàn)了問題,目前項目要上線,那個著急啊,花了將近兩天的時間從網(wǎng)上那個度娘,必應(yīng)啊,但還好最終還是完美解決了。
現(xiàn)在對自己這兩天的辛苦做個總結(jié),也當是記錄一下自己的感悟。
當前項目前端版本
package.json
{ "name": "vue-antd-pro", "version": "1.2.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" }, "dependencies": { "@antv/data-set": "^0.10.1", "@fortawesome/fontawesome-svg-core": "^1.2.25", "@fortawesome/free-solid-svg-icons": "^5.11.2", "@fortawesome/vue-fontawesome": "^0.1.8", "ant-design-vue": "^1.6.2", "axios": "^0.18.0", "babel-polyfill": "^6.26.0", "browserslist": "^4.12.0", "caniuse-lite": "^1.0.30001062", "core-js": "^2.6.11", "echarts": "^4.6.0", "enquire.js": "^2.1.6", "js-cookie": "^2.2.0", "lodash.get": "^4.4.2", "lodash.pick": "^4.4.0", "md5": "^2.2.1", "moment": "^2.24.0", "nprogress": "^0.2.0", "viser-vue": "^2.3.3", "vue": "^2.6.11", "vue-baidu-map": "^0.21.22", "vue-clipboard2": "^0.2.1", "vue-cropper": "^0.4.4", "vue-echarts": "^5.0.0-beta.0", "vue-json-excel": "^0.2.98", "vue-ls": "^3.2.0", "vue-router": "^3.0.1", "vuex": "^3.1.0" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.3.0", "@vue/cli-plugin-eslint": "^3.3.0", "@vue/cli-plugin-unit-jest": "^3.3.0", "@vue/cli-service": "^3.3.0", "@vue/eslint-config-standard": "^4.0.0", "@vue/test-utils": "^1.0.0-beta.20", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.0.1", "babel-jest": "^23.6.0", "eslint": "^5.8.0", "eslint-plugin-html": "^5.0.0", "eslint-plugin-vue": "^5.0.0", "less": "^3.8.1", "less-loader": "^4.1.0", "vue-template-compiler": "^2.6.11", "webpack-bundle-analyzer": "^3.1.0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/strongly-recommended", "@vue/standard" ], "parserOptions": { "parser": "babel-eslint" }, "rules": { "generator-star-spacing": "off", "no-mixed-operators": 0, "vue/max-attributes-per-line": [ 2, { "singleline": 5, "multiline": { "max": 1, "allowFirstLine": false } } ], "vue/attribute-hyphenation": 0, "vue/html-self-closing": 0, "vue/component-name-in-template-casing": 0, "vue/html-closing-bracket-spacing": 0, "vue/singleline-html-element-content-newline": 0, "vue/no-unused-components": 0, "vue/multiline-html-element-content-newline": 0, "vue/no-use-v-if-with-v-for": 0, "vue/html-closing-bracket-newline": 0, "vue/no-parsing-error": 0, "no-console": 0, "no-tabs": 0, "quotes": [ 2, "single", { "avoidEscape": true, "allowTemplateLiterals": true } ], "semi": [ 2, "never", { "beforeStatementContinuationChars": "never" } ], "no-delete-var": 2, "prefer-const": [ 2, { "ignoreReadBeforeAssign": false } ] } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
目前可以做到兼容到>=IE9
解決步驟
1.安裝 bable-polyfill
yarn install babel-polifill --save
2.vue.config.js 里配置
const path = require('path') const webpack = require('webpack') // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin function resolve (dir) { return path.join(__dirname, dir) } // vue.config.js module.exports = { /* Vue-cli3: Crashed when using Webpack `import()` #2463 https://github.com/vuejs/vue-cli/issues/2463 */ /* pages: { index: { entry: 'src/main.js', chunks: ['chunk-vendors', 'chunk-common', 'index'] } }, */ configureWebpack: { // 關(guān)閉webpack 的性能提示 performance: { hints: false }, plugins: [ // Ignore all locale files of moment.js new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) // new BundleAnalyzerPlugin() ], externals: { 'vue': 'Vue', 'ant-design-vue': 'antd', 'BMap': 'BMap' } }, chainWebpack: (config) => { config.resolve.alias .set('@$', resolve('src')) .set('@api', resolve('src/api')) .set('@assets', resolve('src/assets')) .set('@comp', resolve('src/components')) .set('@views', resolve('src/views')) .set('@layout', resolve('src/layout')) .set('@static', resolve('src/static')) config.entry('main').add('babel-polyfill') }, css: { loaderOptions: { less: { modifyVars: { /* less 變量覆蓋,用于自定義 ant design 主題 */ /* 'primary-color': '#F5222D', 'link-color': '#F5222D', 'border-radius-base': '4px', */ 'font-size-base': '13px' }, javascriptEnabled: true } } }, devServer: { disableHostCheck: true, port: 8082, proxy: { '/api': { // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', target: 'http://localhost:8080/omsdc', ws: false, changeOrigin: true }, '/proxy2': { target: 'http://localhost:8080/omsdc', ws: false, changeOrigin: true } } }, lintOnSave: undefined, productionSourceMap: false, transpileDependencies: [ 'resize-detector' ] }
重點是
config.entry(‘main').add(‘babel-polyfill'),表示引入到main.js中;transpileDependencies: [ ‘resize-detector' ]
表示node_modules 里沒有被轉(zhuǎn)換行成es5的模塊,可以從這個數(shù)組里面配置,進行轉(zhuǎn)換
3.main.js 中引入 import ‘core-js’
4.重啟服務(wù),刷新IE瀏覽器,完美解決?。?!
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js實現(xiàn)的全選與全不選功能示例【基于elementui】
這篇文章主要介紹了vue.js實現(xiàn)的全選與全不選功能,結(jié)合實例形式分析了vue.js基于elementui實現(xiàn)全選與全不選功能的相關(guān)頁面渲染、初始化數(shù)據(jù)及功能函數(shù)等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12vuex存儲數(shù)組(新建,增,刪,更新)并存入localstorage定時刪除功能實現(xiàn)
這篇文章主要介紹了vuex存儲數(shù)組(新建,增,刪,更新),并存入localstorage定時刪除,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04vuex通過getters訪問數(shù)據(jù)為undefined問題及解決
這篇文章主要介紹了vuex通過getters訪問數(shù)據(jù)為undefined問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08淺談vue項目優(yōu)化之頁面的按需加載(vue+webpack)
本篇文章主要介紹了vue項目優(yōu)化之頁面的按需加載(vue+webpack),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解
這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09