VueCli3中兼容IE11配置的艱苦歷程
更新時間：2022年05月27日 14:09:50 作者：風(fēng)隨心飛飛
這篇文章主要介紹了VueCli3中兼容IE11配置的艱苦歷程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
由于目前項目是采用VueCli3 搭建的項目，對google，火狐、eage 、360等瀏覽器兼容不錯，但是對IE確出現(xiàn)了問題，目前項目要上線，那個著急啊，花了將近兩天的時間從網(wǎng)上那個度娘，必應(yīng)啊，但還好最終還是完美解決了。
現(xiàn)在對自己這兩天的辛苦做個總結(jié)，也當(dāng)是記錄一下自己的感悟。
當(dāng)前項目前端版本
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-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,這篇文章將為大家詳細介紹一下vue-dplayer視頻播放器組件的安裝與使用,需要的小伙伴可以參考下2023-09-09
Vue使用echarts散點圖在區(qū)域內(nèi)標(biāo)點
這篇文章主要為大家詳細介紹了Vue使用echarts散點圖在區(qū)域內(nèi)標(biāo)點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了element跨分頁操作選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
vue實現(xiàn)導(dǎo)航標(biāo)題欄隨頁面滾動漸隱漸顯效果
這篇文章主要介紹了vue實現(xiàn)導(dǎo)航標(biāo)題欄隨頁面滾動漸隱漸顯效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue中使用iconfont圖標(biāo)的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了vuecli4配置sass與less詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vue+elementUI 復(fù)雜表單的驗證、數(shù)據(jù)提交方案問題
這篇文章主要介紹了vue+elementUI 復(fù)雜表單的驗證、數(shù)據(jù)提交方案,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
開發(fā)vue項目的時候一般都會開發(fā)很多自定義的全局組件,下面這篇文章主要給大家總結(jié)介紹了關(guān)于VUE中常用的四種高級方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09