nuxt3中部分页面使用 vw 方案

背景

项目一开始定义仓库为 pc项目，后面逐步迭代中，发现有一些h5页面，也想放这个仓库里，导致一个仓库 既有 px单位，也有 vw单位。

既然有这样的需求，我们就开干， 项目基于 nuxt3+vue3， 该方案同样适用 vite + vue3 这种搭配

nuxt@3+
node@20.x
"postcss-px-conversion": "^0.1.3",

安装依赖

pnpm add postcss-px-conversion -D

配置

在 nuxt.config.ts中配置

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-px-conversion': {
        unitType: 'px', // 要转化的单位
        viewportWidth: 375, // UI设计稿的宽度
        unitPrecision: 10, // 转换后的精度，即小数点位数
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        includeFiles: [/\/pages\/h5\/exhibition/, /\/pages-components\/exhibition-h5/], // 如果设置了include，那将只有匹配到的文件才会被转换
        excludeFiles: [/node_modules/] // 设置忽略文件，用正则做目录名匹配
      }
    }
  }
})

目录结构

- nuxt.config.ts
- package.json
- pages/
    - h5/                  h5页面
        - exhibition
    - index/               pc页面
        - index.vue
    - about/               pc页面
        - index.vue
- pages-components
    - exhibition-h5
        - a.vue
        - b.vue
        - c.vue

在nuxt3中，默认情况，放在 pages里面的 .vue都会被转为 页面，所以，为了避免将子组件自动转成 页面，导致 SEO 混乱的问题， 将组件拆分，放在 pages-components 目录，这里只是创建了目录，不需要额外的任何配置, 引入路径，正常写即可，也可以使用 ~ 别名引入 pages-components里面的子组件

现在就可以在 exhibition 里面使用 vw， 而其他页面继续使用 px 单位，相互不影响。

别的 px 转 vw插件，有的已经不维护，有的因为 include 是不会生效的，所以使用当前这个插件。