Nuxt3 使用适配

Nuxt3 使用 normalize.css

安装

pnpm install normalize.css -S

配置

export default defineNuxtConfig({
    compatibilityDate: "2025-01-07",
    devtools: { enabled: true },
    css: ["normalize.css/normalize.css"],
})

Nuxt3 使用 postcss-pxtorem 和 amfe-flexible

安装

pnpm install amfe-flexible  -S

pnpm install postcss-pxtorem -S

写插件

• 根目录新建 plugins\rem\flexible.js 文件

import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(() => {
  if (process.client) {
    (function flexible(window, document) {
      const docEl = document.documentElement;
      const dpr = window.devicePixelRatio || 1;

      // adjust body font size
      function setBodyFontSize() {
        if (document.body) document.body.style.fontSize = `${12 * dpr}px`;
        else document.addEventListener("DOMContentLoaded", setBodyFontSize);
      }
      setBodyFontSize();

      // set 1rem = viewWidth / 10
      function setRemUnit() {
        const rem = docEl.clientWidth / 10;
        docEl.style.fontSize = `${rem}px`;
      }

      setRemUnit();

      // reset rem unit on page resize
      window.addEventListener("resize", setRemUnit);
      window.addEventListener("pageshow", (e) => {
        if (e.persisted) setRemUnit();
      });

      // detect 0.5px supports
      if (dpr >= 2) {
        const fakeBody = document.createElement("body");
        const testElement = document.createElement("div");
        testElement.style.border = ".5px solid transparent";
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) docEl.classList.add("hairlines");

        docEl.removeChild(fakeBody);
      }
    })(window, document);
  }
});

挂载插件

• (1) 在 nuxt.config.ts 中挂载插件

• (2) 修改 app 属性中的 head

• (3) postcss 里面配置 postcss-pxtorem

import postCssPxToRem from "postcss-pxtorem";
export default defineNuxtConfig({
  compatibilityDate: "2025-01-07",
  devtools: { enabled: true },
  css: ["normalize.css/normalize.css"],
  // 使用scss
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/scss/base.scss" as *;',
        },
      },
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 75, // UI设计稿的宽度/10
            unitPrecision: 3, // 转rem精确到小数点多少位
            propList: ["*"], // 需要转换的属性 *表示所有
            selectorBlackList: ["ignore"], // 不进行px转换的选择器
            replace: true, // 是否直接更换属性值，而不添加备用属性
            mediaQuery: false, // 是否在媒体查询的css代码中也进行转换
            minPixelValue: 0, // 设置要替换的最小像素值
            exclude: /node_modules/i, // 排除node_modules文件夹下的文件
          }),
        ],
      },
    },
  },
  // 测试环境读取
  runtimeConfig: {
    // 仅仅在服务端
    baseUrl: process.env.VITE_BASE_URL,
    // 客户端也读取
    public: {
      baseUrl: process.env.VITE_BASE_URL,
    },
  },
  // 这里是方便生产环境读取
  appConfig: {
    mode: process.env.VITE_MODE,
    baseUrl: process.env.VITE_BASE_URL,
  },
  // SEO配置
  app: {
    head: {
      title: "Nuxt3",
      meta: [
        { name: "description", content: "Nuxt3" },
        { name: "keywords", content: "Nuxt3" },
        {
          name: "viewport",
          content:
            "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0",
        },
      ],
      link: [
        {
          rel: "stylesheet",
          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
        },
      ],
      script: [
        {
          src: "https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js",
        },
      ],
    },
  },
  // 安装插件
  plugins: ["~/plugins/rem/flexible.ts"],
});