机型兼容

机型兼容配置

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "dayjs": "^1.10.8",
+    "lib-flexible": "^0.3.2",
     "pinia": "^2.x.x",
     "vant": "^3.4.5",
     "vue": "^3.2.25",
@@ -23,12 +24,13 @@
     "axios": "^0.26.0",
     "eslint": "^8.10.0",
     "eslint-plugin-vue": "^8.5.0",
+    "postcss-pxtorem": "^6.0.0",
     "sass": "^1.49.9",
     "typescript": "^4.5.4",
     "vite": "^2.8.0",
-    "vite-plugin-style-import": "1.4.1",
+    "vite-plugin-style-import": "^1.4.1",
     "vite-plugin-windicss": "^1.8.3",
     "vue-tsc": "^0.29.8",
     "windicss": "^3.5.1"
   }
-}
+}

src/components/CommonList.vue

@@ -50,7 +50,8 @@
   width: 100%;
   background: #fff;
   padding: 15px;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
+  font-size: 14px;
   .item{
     display: flex;
     align-items: center;

src/main.ts

@@ -2,9 +2,11 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
 import router from './router'
+import 'lib-flexible/flexible' // px在h5自动转rem
 import 'virtual:windi.css'
 // import 'virtual:windi-devtools'
 
+
 import { useVant } from './plugins/vant'
 
 

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import styleImport, { VantResolve } from 'vite-plugin-style-import'
+import postCssPxToRem from "postcss-pxtorem"
 import WindiCSS from 'vite-plugin-windicss'
 import * as path from 'path'
 
@@ -8,13 +9,33 @@ import * as path from 'path'
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    host: true
+    port: 4500, // 设置服务启动端口号
+    open: true, // 设置服务启动时是否自动打开浏览器
+    cors: true // 允许跨域
+
+    // 设置代理，根据我们项目实际情况配置
+    // proxy: {
+    //   '/api': {
+    //     target: 'http://xxx.xxx.xxx.xxx:x000',
+    //     changeOrigin: true,
+    //     secure: false,
+    //     rewrite: (path) => path.replace('/api/', '/')
+    //   }
+    // },
   },
+  base: './', // 设置打包路径
   plugins: [
     vue(),
     WindiCSS(),
     styleImport({
-      resolves: [VantResolve()]
+      resolves: [VantResolve()],
+      libs: [
+        {
+          libraryName: 'vant',
+          esModule: true,
+          resolveStyle: component => `/node_modules/vant/es/${component}/style/index`,
+        },
+      ],
     })
   ],
   resolve: {
@@ -29,5 +50,19 @@ export default defineConfig({
       apis: path.resolve(__dirname, 'src/apis'),
       dirs: path.resolve(__dirname, 'src/directives')
     }
-  }
+  },
+  css: {
+    postcss: {
+      plugins: [
+        postCssPxToRem({
+          rootValue: 37.5, // Vant 官方根字体大小是 37.5
+          propList: ['*'],
+          selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
+        })
+      ]
+    }
+  },
+
+  
+
 })