1、新增样式1440px以上的自适应

2、webpack打包sourcemap配置，vue-cli-4.*没起到作用

package.json

@@ -35,7 +35,9 @@
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^7.0.0-0",
     "eslint-plugin-vue": "^7.0.0-0",
     "less": "^3.0.4",
     "less": "^3.0.4",
-    "less-loader": "^5.0.0"
+    "less-loader": "^5.0.0",
+    "postcss-px2rem": "^0.3.0",
+    "px2rem-loader": "^0.1.9"
   },
   },
   "eslintConfig": {
   "eslintConfig": {
     "root": true,
     "root": true,

src/App.vue

@@ -35,7 +35,7 @@ export default {
   font-family: SourceHanSansSC-regular;
   font-family: SourceHanSansSC-regular;
   -webkit-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -moz-osx-font-smoothing: grayscale;
-  min-width: 1440px;
+  min-width: 1440px;/*no*/
   height: 100%;
   height: 100%;
   #app-body {
   #app-body {
     width: 100%;
     width: 100%;

src/components/LeftNav.vue

@@ -64,20 +64,10 @@ export default {
         }
         }
         return item
         return item
       })
       })
-      console.log('newTops:', newTops)
-      console.log('this.selectedKeys:', this.selectedKeys)
-      console.log('this.openKeys:', this.openKeys)
+      // console.log('newTops:', newTops)
+      // console.log('this.selectedKeys:', this.selectedKeys)
+      // console.log('this.openKeys:', this.openKeys)
       this.menus = newTops
       this.menus = newTops
-      // this.menus.forEach((item) => {
-      //   this.rootSubmenuKeys.push(item.id)
-      //   item.items.forEach((sub) => {
-      //     if (sub.route === currentRoute) {
-      //       this.selectedKeys.push(sub.id)
-      //       this.openKeys.push(item.id)
-      //     }
-      //     this.routes[sub.id] = sub.route
-      //   })
-      // })
     })
     })
   },
   },
   methods: {
   methods: {
@@ -90,10 +80,6 @@ export default {
       }
       }
     },
     },
     select (e) {
     select (e) {
-      console.log(e)
-      // const [key] = e.selectedKeys
-      // console.log(this.routes[key])
-      // this.$router.push(this.routes[key])
       this.$router.push(e.key)
       this.$router.push(e.key)
     }
     }
   }
   }
@@ -126,13 +112,16 @@ export default {
             &::after {
             &::after {
                 content: "";
                 content: "";
                 width: 100%;
                 width: 100%;
-                height: 2px;
+                height: 1px; /*no*/
                 background: #C3C3C3 100%;
                 background: #C3C3C3 100%;
                 position: absolute;
                 position: absolute;
-                bottom: -1px;
+                // bottom: -1px; /*no*/
                 left: 40px;
                 left: 40px;
             }
             }
         }
         }
+        ::v-deep .ant-menu-submenu-inline{
+          padding: 0;
+        }
         ::v-deep .ant-menu-submenu-title {
         ::v-deep .ant-menu-submenu-title {
             height: 58px;
             height: 58px;
             margin: 0;
             margin: 0;
@@ -141,6 +130,9 @@ export default {
             font-weight: bold;
             font-weight: bold;
             background: #D2D2D2 100%;
             background: #D2D2D2 100%;
         }
         }
+        ::v-deep .ant-menu-sub{
+          background: #E3E3E3 100%;;
+        }
         ::v-deep .ant-menu-submenu-selected {
         ::v-deep .ant-menu-submenu-selected {
             .ant-menu-submenu-title {
             .ant-menu-submenu-title {
                 background:#C3C3C3 100%;
                 background:#C3C3C3 100%;
@@ -155,10 +147,10 @@ export default {
             &::after {
             &::after {
                 content: "";
                 content: "";
                 width: 100%;
                 width: 100%;
-                height: 2px;
+                height: 1px;/*no*/
                 background:#D0D0D0 100%;
                 background:#D0D0D0 100%;
                 position: absolute;
                 position: absolute;
-                bottom: -1px;
+                // bottom: -1px;/*no*/
                 left: 40px;
                 left: 40px;
                 top: unset;
                 top: unset;
                 right: unset;
                 right: unset;
@@ -167,6 +159,12 @@ export default {
                 opacity: 1;
                 opacity: 1;
                 transition: unset;
                 transition: unset;
             }
             }
+            &:last-child{
+              &::after{
+                height: 0;
+              }
+            }
+
         }
         }
     }
     }
 }
 }

src/libs/flexible.js

+/* eslint-disable no-useless-escape */
+
+;(function (win, lib) {
+  var doc = win.document
+  var docEl = doc.documentElement
+  var metaEl = doc.querySelector('meta[name="viewport"]')
+  var flexibleEl = doc.querySelector('meta[name="flexible"]')
+  var dpr = 0
+  var scale = 0
+  var tid
+  var flexible = lib.flexible || (lib.flexible = {})
+
+  if (metaEl) {
+    console.warn('将根据已有的meta标签来设置缩放比例')
+    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
+    if (match) {
+      scale = parseFloat(match[1])
+      dpr = parseInt(1 / scale)
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content')
+    if (content) {
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    // eslint-disable-next-line no-unused-vars
+    var isAndroid = win.navigator.appVersion.match(/android/gi)
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
+    var devicePixelRatio = win.devicePixelRatio
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2
+      } else {
+        dpr = 1
+      }
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1
+    }
+    scale = 1 / dpr
+  }
+
+  docEl.setAttribute('data-dpr', dpr)
+  if (!metaEl) {
+    metaEl = doc.createElement('meta')
+    metaEl.setAttribute('name', 'viewport')
+    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl)
+    } else {
+      var wrap = doc.createElement('div')
+      wrap.appendChild(metaEl)
+      doc.write(wrap.innerHTML)
+    }
+  }
+
+  function refreshRem () {
+    var width = docEl.getBoundingClientRect().width
+    if (width / dpr > 540) {
+      // 需修改 width = 540 * dpr；这里是设置成了当屏幕宽度大于540的时候把屏幕宽度写死了，我们需要动态变化所以得改过来不能写死，改成如下：
+      // width = 540 * dpr;
+      width = width * dpr
+    }
+    var rem = width / 10
+    // 这里设置最小兼容宽度144px
+    rem = rem <= 144 ? 144 : rem
+    docEl.style.fontSize = rem + 'px'
+    flexible.rem = win.rem = rem
+  }
+
+  win.addEventListener('resize', function () {
+    clearTimeout(tid)
+    tid = setTimeout(refreshRem, 300)
+  }, false)
+  win.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      clearTimeout(tid)
+      tid = setTimeout(refreshRem, 300)
+    }
+  }, false)
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px'
+  } else {
+    doc.addEventListener('DOMContentLoaded', function (e) {
+      doc.body.style.fontSize = 12 * dpr + 'px'
+    }, false)
+  }
+
+  refreshRem()
+
+  flexible.dpr = win.dpr = dpr
+  flexible.refreshRem = refreshRem
+  flexible.rem2px = function (d) {
+    var val = parseFloat(d) * this.rem
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px'
+    }
+    return val
+  }
+  flexible.px2rem = function (d) {
+    var val = parseFloat(d) / this.rem
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem'
+    }
+    return val
+  }
+})(window, window.lib || (window.lib = {}))

src/main.js

@@ -4,6 +4,8 @@ import router from './router'
 import store from './store'
 import store from './store'
 import http from './service/http'
 import http from './service/http'
 import { Button, Popover, Menu, Breadcrumb } from 'ant-design-vue'
 import { Button, Popover, Menu, Breadcrumb } from 'ant-design-vue'
+import './libs/flexible'
+
 // const env = process.env
 // const env = process.env
 // console.log(env)
 // console.log(env)
 
 

vue.config.js

-console.log(process.env.NODE_ENV)
+const IS_DEBUG = process.env.NODE_ENV === 'dev'
+const px2rem = require('postcss-px2rem')
+// 配置基本大小
+const postcss = px2rem({
+  // 基准大小 baseSize，需要和rem.js中相同
+  remUnit: 192
+})
 module.exports = {
 module.exports = {
-  // productionSourceMap: process.env.NODE_ENV === 'dev',
+  lintOnSave: true,
+  configureWebpack: config => {
+    if (IS_DEBUG) {
+      config.output.devtoolModuleFilenameTemplate = info => {
+        const resPath = info.resourcePath
+        if ((/\.vue$/.test(resPath) && !/type=script/.test(info.identifier)) || /node_modules/.test(resPath)) {
+          return `webpack:///${resPath}?${info.hash}`
+        }
+        return `webpack:///${resPath.replace('./src', 'clm-admin-dev/src')}`
+      }
+    }
+  },
   css: {
   css: {
-    extract: process.env.NODE_ENV === 'pro'
+    sourceMap: IS_DEBUG,
+    loaderOptions: {
+      postcss: {
+        plugins: [postcss]
+      }
+    }
   }
   }
 }
 }