chore: use postcss-mobile-forever to keep usability of mobile viewport

wswmsword · wswmsword · commit 0267b6d826a7 · 2023-03-01T23:25:47.000+08:00
diff --git a/package.json b/package.json
@@ -43,7 +43,6 @@
     "@vitejs/plugin-legacy": "^3.0.1",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "@yuo/postcss-px2vw": "^1.0.5",
     "autoprefixer": "^10.4.13",
     "babel-plugin-module-resolver": "^4.1.0",
     "commitizen": "^4.2.6",
@@ -56,6 +55,7 @@
     "mockjs": "^1.1.0",
     "path-to-regexp": "^6.2.1",
     "plop": "^3.1.1",
+    "postcss-mobile-forever": "^2.2.2",
     "rollup": "^3.7.2",
     "rollup-plugin-visualizer": "^5.8.3",
     "signale": "^1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -7,7 +7,7 @@ import 'nprogress/nprogress.css'
 import mian from '@/views/index.vue'
 import mock from '@/views/mock/index.vue'
 import charts from '@/views/charts/index.vue'
-NProgress.configure({ showSpinner: true })
+NProgress.configure({ showSpinner: true, parent: '#app' })
 
 // 定义路由，每个路由都需要映射到一个组件
 const routes = [
diff --git a/vite.config.ts b/vite.config.ts
@@ -11,7 +11,7 @@ import vue from '@vitejs/plugin-vue'
 import legacy from '@vitejs/plugin-legacy'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
-import px2vw from '@yuo/postcss-px2vw'
+import viewport from 'postcss-mobile-forever'
 import autoprefixer from 'autoprefixer'
 
 import { viteVConsole } from 'vite-plugin-vconsole'
@@ -80,8 +80,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       postcss: {
         plugins: [
           autoprefixer(),
-          px2vw({
+          viewport({
+            rootSelector: '#app',
             viewportWidth: 375,
+            border: false,
+            disableDesktop: false,
+            disableLandscape: false,
           }),
         ],
       },
