wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wangqiao
2025-09-01 09:57:10 +08:00
parent 80a48e1e71
commit 7a8f096513
8 changed files with 85 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
layouts/m.vue Normal file
View File

19
middleware/auth.global.ts Normal file
View File

@ -0,0 +1,19 @@
// 区分是手机端还是移动端
export default defineNuxtRouteMiddleware((to, from) => {
if (import.meta.client) {
// 在客户端处理路由
// 是否是移动端设备
const isMobile = /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(navigator.userAgent)
// 是否是手机端路由
const isRouterMobile = /^\/m\//.test(to.fullPath)
// 移动端并且 不是/m开头路由
if (isMobile && !isRouterMobile) {
return navigateTo(`/m`)
}
// 不是移动端 是/m开头路由
if (!isMobile && isRouterMobile) {
return navigateTo(`/`)
}
}
})

1
middleware/auth.ts
View File

@ -1 +0,0 @@
// 从微信登录重定向到项目 需要获取code值

25
nuxt.config.ts
View File

@ -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/],
}),
],
},
},

3
package.json
View File

@ -20,6 +20,7 @@
"nuxt": "^3.18.1",
"pdfjs-dist": "^5.4.54",
"pinia": "^3.0.3",
"postcss-px-to-viewport": "^1.1.1",
"qrcode.vue": "^3.6.0",
"vue": "^3.5.18",
"vue-pdf-embed": "^2.1.3",
@ -32,7 +33,9 @@
"@pinia-plugin-persistedstate/nuxt": "^1.2.1",
"@types/prettier": "^3.0.0",
"@unocss/nuxt": "^66.4.2",
"@vant/nuxt": "^1.0.7",
"element-plus": "^2.10.7",
"postcss": "^8.5.6",
"prettier": "3.6.2",
"sass": "^1.90.0",
"unocss": "^66.4.2"

11
pages/m/index.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div>
<h1>Mobile Page</h1>
</div>
</template>
<script setup lang="ts">
// Mobile specific logic can be added here
</script>
<style lang="scss" scoped></style>

2
types/global.d.ts vendored
View File

@ -42,3 +42,5 @@ declare module '@wangeditor/editor-for-vue' {
export const Editor: DefineComponent<any, any, any>
export const Toolbar: DefineComponent<any, any, any>
}
declare module 'postcss-px-to-viewport'

35
yarn.lock
View File

@ -1009,7 +1009,7 @@
which "^5.0.0"
ws "^8.18.3"
"@nuxt/kit@3.18.1", "@nuxt/kit@^3.12.2", "@nuxt/kit@^3.13.2", "@nuxt/kit@^3.15.4", "@nuxt/kit@^3.17.6", "@nuxt/kit@^3.9.0":
"@nuxt/kit@3.18.1", "@nuxt/kit@^3.12.2", "@nuxt/kit@^3.13.2", "@nuxt/kit@^3.14.159", "@nuxt/kit@^3.15.4", "@nuxt/kit@^3.17.6", "@nuxt/kit@^3.9.0":
version "3.18.1"
resolved "https://registry.npmmirror.com/@nuxt/kit/-/kit-3.18.1.tgz"
integrity sha512-z6w1Fzv27CIKFlhct05rndkJSfoslplWH5fJ9dtusEvpYScLXp5cATWIbWkte9e9zFSmQTgDQJjNs3geQHE7og==
@ -2187,6 +2187,15 @@
"@uppy/utils" "^4.1.2"
nanoid "^3.1.25"
"@vant/nuxt@^1.0.7":
version "1.0.7"
resolved "https://registry.npmmirror.com/@vant/nuxt/-/nuxt-1.0.7.tgz#02ca3fe67be1d59c3d4f5e35316521d6ce5dfa3d"
integrity sha512-YVRJIDVlCCjWBhi0a/YBY0M04XmGwAqCkDSEIDIcbvzNN2z178iqKS23Py+c4hUv570LoKaIZMCQ75IJphJkTw==
dependencies:
"@nuxt/kit" "^3.14.159"
magic-string "^0.29.0"
unplugin "^1.16.0"
"@vercel/nft@0.29.4", "@vercel/nft@^0.29.4":
version "0.29.4"
resolved "https://registry.npmmirror.com/@vercel/nft/-/nft-0.29.4.tgz"
@ -4870,6 +4879,13 @@ magic-string@^0.27.0:
dependencies:
"@jridgewell/sourcemap-codec" "^1.4.13"
magic-string@^0.29.0:
version "0.29.0"
resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.29.0.tgz#f034f79f8c43dba4ae1730ffb5e8c4e084b16cf3"
integrity sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==
dependencies:
"@jridgewell/sourcemap-codec" "^1.4.13"
magic-string@^0.30.12, magic-string@^0.30.17, magic-string@^0.30.3, magic-string@^0.30.8:
version "0.30.17"
resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz"
@ -5406,6 +5422,11 @@ nypm@^0.6.0, nypm@^0.6.1:
pkg-types "^2.2.0"
tinyexec "^1.0.1"
object-assign@>=4.0.1:
version "4.1.1"
resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
object-inspect@^1.13.3:
version "1.13.4"
resolved "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz"
@ -5922,6 +5943,14 @@ postcss-ordered-values@^7.0.2:
cssnano-utils "^5.0.1"
postcss-value-parser "^4.2.0"
postcss-px-to-viewport@^1.1.1:
version "1.1.1"
resolved "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz#a25ca410b553c9892cc8b525cc710da47bf1aa55"
integrity sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==
dependencies:
object-assign ">=4.0.1"
postcss ">=5.0.2"
postcss-reduce-initial@^7.0.4:
version "7.0.4"
resolved "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-7.0.4.tgz"
@ -5974,7 +6003,7 @@ postcss-values-parser@^6.0.2:
is-url-superb "^4.0.0"
quote-unquote "^1.0.0"
postcss@^8.5.1, postcss@^8.5.6:
postcss@>=5.0.2, postcss@^8.5.1, postcss@^8.5.6:
version "8.5.6"
resolved "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz"
integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
@ -7061,7 +7090,7 @@ unplugin-vue-router@^0.15.0:
unplugin-utils "^0.2.4"
yaml "^2.8.0"
unplugin@^1.10.0, unplugin@^1.15.0:
unplugin@^1.10.0, unplugin@^1.15.0, unplugin@^1.16.0:
version "1.16.1"
resolved "https://registry.npmmirror.com/unplugin/-/unplugin-1.16.1.tgz"
integrity sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==