IE兼容

.browserslistrc

@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
-not dead
+not dead,
+IE 11

.env.development

@@ -4,4 +4,4 @@ NODE_ENV = 'development'
 VUE_APP_MODE = 'development'
 
 # VUE_APP_BASE_API = 'http://192.168.3.149:7654'
-VUE_APP_BASE_API = 'http://192.168.3.86:7654'
+VUE_APP_BASE_API = '/api'

babel.config.js

@@ -7,12 +7,24 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 module.exports = {
+  sourceType: 'unambiguous',
   presets: [
-    '@vue/cli-plugin-babel/preset',
+    [
+      '@vue/cli-plugin-babel/preset',
+      {
+        useBuiltIns: 'usage',
+        corejs: 3,
+        targets: {
+          ie: '11'
+        }
+      }
+    ],
     ['@babel/preset-env', {
-      useBuiltIns: 'entry',
+      useBuiltIns: 'usage',
       corejs: 3,
-      targets: 'IE 11'
+      targets: {
+        ie: '11'
+      }
     }]
   ],
   plugins

package-lock.json

@@ -1339,6 +1339,11 @@
           "version": "2.6.12",
           "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
           "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
         }
       }
     },
@@ -9413,9 +9418,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regenerator-transform": {
       "version": "0.15.2",

package.json

@@ -21,6 +21,7 @@
     "fs": "0.0.1-security",
     "lodash": "^4.17.21",
     "qs": "^6.14.0",
+    "regenerator-runtime": "^0.14.1",
     "scrolling-element": "^1.0.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",

src/layout/index.vue

@@ -118,9 +118,10 @@ export default {
     width: 0;
     flex: 1;
     height: 100vh;
-    display: flex;
-    flex-direction: column;
+    // display: flex;
+    // flex-direction: column;
     &-header {
+      height: 55px;
       display: flex;
       align-items: center;
       &-main {
@@ -151,8 +152,9 @@ export default {
       }
     }
     &-main {
-      height: 0;
-      flex: 1;
+      height: calc(100vh - 55px);
+      box-sizing: border-box;
+      // flex: 1;
       overflow: auto;
       background: #f5f7f9;
     }

src/main.js

@@ -1,3 +1,5 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
@@ -6,7 +8,6 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import '@mdi/font/css/materialdesignicons.min.css'
 import 'whatwg-fetch' // fetch ie 11
-import 'core-js/stable'
 import './permission' // 路由守卫
 import promise from 'es6-promise'
 // 引入公用scss
@@ -20,6 +21,7 @@ import 'scrolling-element'
 
 // import '@babel/polyfill'
 require('@babel/polyfill')
+promise.polyfill()
 
 // 修改 MessageBox 的默认配置
 ElementUI.MessageBox.setDefaults({
@@ -29,19 +31,17 @@ ElementUI.MessageBox.setDefaults({
   confirmButtonClass: 'el-button--orange'
 })
 
-promise.polyfill()
-
 Vue.use(ElementUI)
 Vue.use(Directives)
 
 Vue.prototype.$DEFAULT_TITLE = '薪酬通'
 
-if (process.env.NODE_ENV === 'production') {
-  // 重写 console.log, console.warn, console.error 等方法
-  console.log = () => {}
-  console.warn = () => {}
-  console.error = () => {}
-}
+// if (process.env.NODE_ENV === 'production') {
+//   // 重写 console.log, console.warn, console.error 等方法
+//   console.log = () => {}
+//   console.warn = () => {}
+//   console.error = () => {}
+// }
 
 new Vue({
   router,

src/utils/index.js

@@ -14,6 +14,10 @@ export function loadDynamicComponents (vueComponent) {
   return autoComponent
 }
 
+export function isIE () {
+  return !!document.documentMode
+}
+
 /**
  * 唯一id用于echarts
  */

src/views/humanResources/organizationStructure/index.vue

@@ -1,28 +1,33 @@
 <template>
   <div class="fullBox white pa-3 relative" ref="boxRef">
-    <div ref="graphRef" v-loading="loading" class="fullBox"></div>
-    <div class="btnBox pa-1">
-      <!-- <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">
-        <m-button type="orange" icon="el-icon-upload2" size="small" :loading="importLoading">导入</m-button>
-      </el-upload> -->
-      <m-button type="orange" icon="el-icon-download" size="small" :loading="exportLoading" @click="onExport">导出</m-button>
-      <!-- <m-button type="orange" icon="el-icon-download" size="small" :loading="downloadLoading" @click="onDownload">模板下载</m-button> -->
-      <m-button type="orange" icon="el-icon-plus" size="small" @click="onAdd">新增机构</m-button>
-    </div>
-    <div ref="contextMenuRefs" class="contextMenu">
-      <el-card shadow="always" :body-style="{padding: 0}">
-        <div
-          v-for="menu in menus"
-          :key="menu.prop"
-          class="contextMenuItem pa-3"
-          @click="onMenuClick(menu.prop)"
-        >
-          {{ menu.label }}
-        </div>
-      </el-card>
-    </div>
-    <OrganizationEdit ref="organizationEditRefs" @refresh="onRefresh"></OrganizationEdit>
-    <OrganizationAdd ref="organizationAddRefs" @refresh="onRefresh"></OrganizationAdd>
+    <!-- <div v-if="isIE">
+      IE浏览器暂不支持浏览，请前往其他浏览器获取更好体验
+    </div> -->
+    <!-- <template v-else> -->
+      <div ref="graphRef" v-loading="loading" class="fullBox"></div>
+      <div class="btnBox pa-1">
+        <!-- <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">
+          <m-button type="orange" icon="el-icon-upload2" size="small" :loading="importLoading">导入</m-button>
+        </el-upload> -->
+        <m-button type="orange" icon="el-icon-download" size="small" :loading="exportLoading" @click="onExport">导出</m-button>
+        <!-- <m-button type="orange" icon="el-icon-download" size="small" :loading="downloadLoading" @click="onDownload">模板下载</m-button> -->
+        <m-button type="orange" icon="el-icon-plus" size="small" @click="onAdd">新增机构</m-button>
+      </div>
+      <div ref="contextMenuRefs" class="contextMenu">
+        <el-card shadow="always" :body-style="{padding: 0}">
+          <div
+            v-for="menu in menus"
+            :key="menu.prop"
+            class="contextMenuItem pa-3"
+            @click="onMenuClick(menu.prop)"
+          >
+            {{ menu.label }}
+          </div>
+        </el-card>
+      </div>
+      <OrganizationEdit ref="organizationEditRefs" @refresh="onRefresh"></OrganizationEdit>
+      <OrganizationAdd ref="organizationAddRefs" @refresh="onRefresh"></OrganizationAdd>
+    <!-- </template> -->
   </div>
 </template>
 
@@ -33,6 +38,9 @@ import {
   CollapseExpandTree,
   MindMapNode
 } from '@/utils/antvG6'
+import {
+  isIE
+} from '@/utils'
 import {
   Graph,
   register,
@@ -85,6 +93,7 @@ export default {
   },
   data () {
     return {
+      isIE: isIE(),
       menus: [
         { label: '编辑', prop: 'edit' },
         { label: '删除', prop: 'delete' }
@@ -101,6 +110,9 @@ export default {
     ...mapGetters(['organizationTree'])
   },
   async mounted () {
+    // if (isIE()) {
+    //   return
+    // }
     register(ExtensionCategory.BEHAVIOR, 'collapse-expand-tree', CollapseExpandTree)
     register(ExtensionCategory.NODE, 'MindMapNode', MindMapNode)
     const graphData = await this.onInit()
@@ -112,6 +124,9 @@ export default {
     })
   },
   beforeDestroy () {
+    // if (isIE()) {
+    //   return
+    // }
     if (this.graph) {
       this.graph.off()
     }
@@ -373,6 +388,7 @@ export default {
   width: 200px;
 }
 .fullBox {
+  display: -ms-grid;  /* IE10/11 */
   width: 100%;
   height: 100%;
   box-sizing: border-box;

vue.config.js

@@ -16,18 +16,18 @@ module.exports = defineConfig({
     open: true,
     // host: 'localhost',
     port: 9000,
-    hot: true
+    hot: true,
     // https: false,
-    // proxy: {
-    //   '/api': {
-    //     target: process.env.VUE_APP_BASE_API,
-    //     secure: false, // 是否支持 https，默认 false
-    //     changeOrigin: true, // 是否支持跨域
-    //     pathRewrite: {
-    //       '^/api': ''
-    //     }
-    //   }
-    // }
+    proxy: {
+      '/api': {
+        target: 'http://192.168.3.86:7654',
+        secure: false, // 是否支持 https，默认 false
+        changeOrigin: true, // 是否支持跨域
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    }
   },
   configureWebpack: config => {
     config.devtool = 'source-map'
@@ -81,10 +81,7 @@ module.exports = defineConfig({
     })
   },
   // babel-loader 是否处理 node_modules 中的依赖包，处理哪些依赖包，参数类型: boolean | Array<string | RegExp>
-  transpileDependencies: [
-    'axios',
-    'element-ui'
-  ],
+  transpileDependencies: true,
   // 移除console
   terser: {
     terserOptions: {