refactor: 添加移动端适配和路由中间件

nuxt.config.ts

@@ -1,5 +1,6 @@
 // import { base_api } from '~/constants/index'
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import postcsspxtoviewport from 'postcss-px-to-viewport'
 export default defineNuxtConfig({
   // devServer: {
   //   port: 6188,
@@ -13,7 +14,7 @@ export default defineNuxtConfig({
   ssr: true,
   modules: ['@unocss/nuxt', '@pinia/nuxt', '@element-plus/nuxt', 'pinia-plugin-persistedstate/nuxt'],
   unocss: {
-    nuxtLayers: true
+    nuxtLayers: true,
   },
   elementPlus: {
     importStyle: 'scss', // 或 'css'，确保样式被全局导入
@@ -29,12 +30,22 @@ export default defineNuxtConfig({
       },
       postcss: {
         plugins: [
-          // postCssPxToRem({
-          //   rootValue: 16, // 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
-          //   mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
-          //   // exclude: /node_modules/, //node_modules目录下样式全部不转义
-          //   propList: ['*'] //需要做转化处理的属性如`hight`、`width`、`margin`等，`*`表示全部
-          // })
+          postcsspxtoviewport({
+            unitToConvert: 'px', // 要转化的单位
+            viewportWidth: 750, // UI设计稿的宽度
+            unitPrecision: 6, // 转换后的精度，即小数点位数
+            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
+            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
+            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
+            selectorBlackList: ['el-'], // 指定不转换为视窗单位的类名,例如van-（vantUI组件），
+            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
+            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
+            replace: true, // 是否转换后直接更换属性值
+            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配，最好不要排除node_modules 文件，排除后在项目中会发现字体不能跟随页面放大
+            landscape: false, // 是否处理横屏情况
+            // 只转换pages下的m文件
+            include: [/pages\/m/],
+          }),
         ],
       },
     },