Nuxt3适配指南

梨花炖海棠

已于 2024-02-18 14:13:44 修改

阅读量1.1k

点赞数 9

分类专栏： Vue 文章标签：前端 vue

于 2024-02-18 14:08:37 首次发布

本文链接：https://blog.csdn.net/weixin_44531811/article/details/136149207

版权

Vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了如何在Nuxt3项目中使用Postcss插件进行PC和移动端的样式适配，包括安装和配置插件，以及利用VSCode插件处理移动端样式，并详细描述了服务器端的PC/Mobile路由自动适配策略。

摘要由CSDN通过智能技术生成

本篇专栏基于笔者的Vue专栏，Nuxt3系列，如有不连贯之处可查看Nuxt3系列其他文章！特此说明

一、安装插件

该系列使用Postcss插件进行适配，不包含ui组件库适配

二、配置插件

// nuxt.config.ts
import postcssConfig from "./postcss.config";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  postcss: postcssConfig,
  ...
});

// postcss.config.ts
export default {
    plugins: {
        'postcss-px-to-viewport-8-plugin': {
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 1920, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: [], // 指定不转换为视窗单位的类名,例如van-（vantUI组件），
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/, /\/mobile/], // 设置忽略文件，用正则做目录名匹配，最好不要排除node_modules 文件，排除后在项目中会发现字体不能跟随页面放大
            landscape: false, // 是否处理横屏情况
        },
    }
}

上面的配置仅能适配PC端/移动端的设备，如果此时PC端和移动端差异较大建议单独撰写差异较大的一端，笔者这里使用插件适配PC端，移动端因差异较大则是单独撰写的

三、单独适配PC/移动

这里的单独适配是依赖编辑器的插件，以下是用vs code的插件去做移动端的适配；

– 为了方便扩展，这里将页面组件的样式抽离到assets/scss/*下；
– PC页面组件，直接放在这个目录下assets/scss/*, PC样式使用上面的第二点去做适配；
– Mobile页面组件，直接放在这个目录下assets/scss/mobile/*，Mobile样式使用插件去做适配；
– vs code插件，pxtovw;

四、PC和Mobile单独撰写路由自动适配

这里是带国际化的路由适配，如果不需要国际化适配，则按需处理即可；

// server/middleware/route.global.ts
export default defineEventHandler(async (event) => {
    // 服务端

    if (event.path.indexOf("images") == -1) {
        const cookies = parseCookies(event);

        // 是否是移动端设备
        const isMobile = /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(<string>event.headers.get("user-agent"));
        // 是否是手机端路由
        const isRouterMobile = event.path.indexOf("/mobile") == -1 ? false : true;

        if (isMobile && !isRouterMobile) {
            let url = event.path.replace("/zh", "").replace("/en", "");
            console.log("mobile route", event.path, url);
            if (!cookies["i18n_redirected"] || cookies["i18n_redirected"] == "ja") {
                await sendRedirect(event, `/mobile${url}`, 302);
            } else {
                await sendRedirect(event, `/${cookies["i18n_redirected"]}/mobile${url}`, 302);
            }
            return
        }
        if (!isMobile && isRouterMobile) {
            let url = event.path.replace("/zh", "").replace("/en", "").replace("/mobile", "");
            console.log("pc route", event.path, url);
            if (!cookies["i18n_redirected"] || cookies["i18n_redirected"] == "ja") {
                await sendRedirect(event, `${url}`, 302);
            } else {
                await sendRedirect(event, `/${cookies["i18n_redirected"]}${url}`, 302);
            }
        }
        if (!cookies["i18n_redirected"]) {
            let url = event.path.replace("/zh", "").replace("/en", "").replace("/mobile", "");
            setCookie(event, "i18n_redirected", "ja");
            await sendRedirect(event, `${url}`, 302);
            return
        }
    }
});