分辨率自适应

package.json

@@ -31,6 +31,8 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "postcss-px2rem": "^0.3.0",
+    "px2rem-loader": "^0.1.9",
     "qs": "^6.9.4",
     "v-viewer": "^1.6.4",
     "viewerjs": "^1.11.6",

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import moment from 'moment'
 import Element from 'element-ui'
+import './utils/rem.js' // 自适应分辨率
 // import ElementUI from 'element-ui'
 // import './styles/element-variables.scss'
 // import locale from 'element-ui/lib/locale/lang/en' // lang i18n

src/utils/rem.js

+// rem等比适配配置文件
+// 基准大小
+const baseSize = 16
+// 设置 rem 函数
+function setRem() {
+  // 当前页面屏幕分辨率相对于 的缩1920宽放比例，可根据自己需要修改
+  const scale = document.documentElement.clientWidth / 1920
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+  // document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
+
+  // 设置页面根节点字体大小, 字体大小最小为12
+  const fontSize = (baseSize * Math.min(scale, 2)) > 16 ? (baseSize * Math.min(scale, 2)) : 16
+  document.documentElement.style.fontSize = fontSize + 'px'
+}
+// 初始化
+setRem()
+// 改变窗口大小时重新设置 rem
+window.onresize = function() {
+  setRem()
+}

vue.config.js

@@ -21,6 +21,14 @@ const name = defaultSettings.title || 'vue Admin Template' // page title
 // port = 9528 npm run dev OR npm run dev --port = 9528
 const port = process.env.port || process.env.npm_config_port || 8080 // dev port
 
+// 引入等比适配插件
+const px2rem = require('postcss-px2rem')
+
+// 配置基本大小
+const postcss = px2rem({
+  // 基准大小 baseSize，需要和rem.js中相同
+  remUnit: 16
+})
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
@@ -34,13 +42,19 @@ module.exports = {
     loaderOptions: {
       sass: {
         data: '@import "@/styles/variables.scss";'
+      },
+      postcss: {
+        plugins: [
+          postcss
+        ]
       }
     }
   },
   publicPath: process.env.NODE_ENV !== 'development' ? './' : '/',
   outputDir: `dist`,
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
+  // lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: true,
   productionSourceMap: false,
   devServer: {
     host: '0.0.0.0',
@@ -84,8 +98,8 @@ module.exports = {
         // target: `http://10.5.87.231:10010/internal`,
         // target: `http://117.122.212.91:32012/`,
         // target: `http://192.168.1.31:8082/`,
-        // target: `http://192.168.1.12:8082/`, // 孙浩
-        target: `http://192.168.1.21:8001/`, // 张宇
+        target: `http://192.168.1.14:8082/`,
+        // target: `http://192.168.1.21:8001/`, // 张宇
         // target: `http://192.168.1.30:8082/`,
         // changeOrigin: true,
         pathRewrite: {