VueCli3中兼容IE11配置的艰苦历程

VueCli3中兼容IE11配置的艰苦历程

目录

当前项目前端版本

解决步骤

由于目前项目是采用VueCli3 搭建的项目,对google,火狐、eage 、360等浏览器兼容不错,但是对IE确出现了问题,目前项目要上线,那个着急啊,花了将近两天的时间从网上那个度娘,必应啊,但还好最终还是完美解决了。

现在对自己这两天的辛苦做个总结,也当是记录一下自己的感悟。

当前项目前端版本

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: { // 关闭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 里没有被转换行成es5的模块,可以从这个数组里面配置,进行转换

3.main.js 中引入 import ‘core-js’

4.重启服务,刷新IE浏览器,完美解决!!!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读

    学习写字楼新选择6000元主流配置

    学习写字楼新选择6000元主流配置,,这种配置需要考虑双核心的办公和娱乐平台,充分考虑办公室的办公需求和娱乐需求,以约6000元的预算和cost-e

    酷睿I7 配置

    酷睿I7 配置,配置,玩家国度啦华硕 Rampage II Extreme(3800元)如果米不够,也可以把Extreme改为Gene,不过是小板内存推荐金士顿6G DDR3 2000骇

    提高3A四核羿龙II游戏配置的性能

    提高3A四核羿龙II游戏配置的性能,,以节能环保为主题的IT产业,目前3A低端平台处理器、主板芯片组、独立开发卡性能突出,特别是在与AMD的处理

    opporeno8参数配置及价格

    opporeno8参数配置及价格,面部,亿元,Oppo的荣誉2020年1月4日,接近屏幕关闭传感器是否支持双卡:支持oppor11splus什么时候上市的Oppo R11S P

    查看配置:酷睿i3530集展示办公平台

    查看配置:酷睿i3530集展示办公平台,,由于时间和精力的关系,我们不可能对所有的配置进行评论,希望我们能理解,我希望我们的评论能在那些需要帮

    3500元超额值学生娱乐结构的优化配置

    3500元超额值学生娱乐结构的优化配置,,作为一个DIY的主流用户领域的学生,每个用户51学生攒机的高峰。因为学生用户没有稳定的收入来源,攒机