前言

我是真的不想做SEO...

小菜鸟一个，文笔也差劲很，第一次通过文章的形式记录项目中碰到的一些问题，大家多担待......

目前在做的一个项目，需要做seo，nuxt就是vue一个开箱即用的ssr框架，目前nuxt3也是已经rc6了，作为勇士，我决定直接用Nuxt3，勇一下！

我知道当中肯定会碰到很多不同的...奇奇怪怪的...网上查不到的...问题，所以我想用文章的形式把我碰到的一些问题记录下来，不知道对不对，是不是最优解，但是只要能帮到大家我就很开心了，当然如果是错的，别喷我昂，还希望大家指正！如果有更好的办法，还希望大家不吝赐教！

移动端适配方案

我目前在做的这个项目是一个移动端H5项目，正常的H5是全屏适配只在移动端访问的

但是我这个项目是需要移动端和PC端都可以访问，也就是相当于一套代码去适配两个端

干货-具体做法

方案1：REM布局 postcss-pxtorem

截图为VantUI提供的REM布局方案

postcss-pxtorem这个插件就是将项目中的px单位转换为rem单位

lib-flexible 是设置rem基准值
[图片上传失败...(image-c835c7-1659605478372)]

方案1.1 标准H5上的REM布局

1.安装postcss-pxtorem

npm install postcss postcss-pxtorem --save-dev

2.设置postcss-pxtorem

我们以设计图为375为例

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*'],
        mediaQuery: false,
        exclude: 'ignore',
      },
    },
  },
})

3.使用lib-flexible

根目录创建plugins目录-->创建flexible.ts

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))
  }
})

4.结尾

这个时候就会把屏幕等分切割，直接按照375px的设计图写就行，插件会自动将px转换为rem

方案1.2 pc和移动都适配的REM布局

1.安装postcss-pxtorem

npm install postcss postcss-pxtorem --save-dev

2.设置postcss-pxtorem

我们以设计图为750为例

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-pxtorem': {
        rootValue: 50,
        propList: ['*'],
        mediaQuery: false,
        exclude: 'ignore',
      },
    },
  },
})

亲测 rootValue是50的时候 vant适配刚刚好...

3.设置rem

根目录创建plugins目录-->创建rem.ts

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(() => {
  if (process.client) {
    // 屏幕适应
    (function (win, doc) {
      if (!win.addEventListener)
        return
      function setFont() {
        // var html = document.documentElement;
        // var k = 640;
        // html.style.fontSize = html.clientWidth / k * 100 + "px";
        let screenWidth = document.querySelector('html')!.offsetWidth
        const baseSz = 100
        const pageWidth = 750
        if (screenWidth > 640)
          screenWidth = 640

        let fZ = (baseSz * screenWidth) / pageWidth
        if (fZ > 85)
          fZ = 85
        document.querySelector('html')!.style.fontSize = `${fZ}px`
      }
      setFont()
      setTimeout(() => {
        setFont()
      }, 300)
      doc.addEventListener('DOMContentLoaded', setFont, false)
      win.addEventListener('resize', setFont, false)
      win.addEventListener('load', setFont, false)
    })(window, document)
  }
})

4.结尾

此时1rem =100px

方案2：VW布局 postcss-pxtovw

这个vant进阶用法中有教程...我就不班门弄斧了

页面闪烁问题

css

根目录创建assets目录-->创建css目录-->创建base.ignore.css

@import './normalize.scss';
@media (min-width: 320px) {
  html {
    font-size: 42.6667px;
  }
}

@media (min-width: 360px) {
  html {
    font-size: 48px;
  }
}

@media (min-width: 375px) {
  html {
    font-size: 50px;
  }
}

@media (min-width: 384px) {
  html {
    font-size: 51.2px;
  }
}

@media (min-width: 414px) {
  html {
    font-size: 55.2px;
  }
}

@media (min-width: 448px) {
  html {
    font-size: 59.7333px;
  }
}

@media (min-width: 480px) {
  html {
    font-size: 64px;
  }
}

@media (min-width: 512px) {
  html {
    font-size: 68.2667px;
  }
}

@media (min-width: 544px) {
  html {
    font-size: 72.5333px;
  }
}

@media (min-width: 576px) {
  html {
    font-size: 76.8px;
  }
}

@media (min-width: 608px) {
  html {
    font-size: 81.0667px;
  }

}

@media (min-width: 640px) {
  html {
    font-size: 85px;
  }
}

@media (min-width: 750px) {
  html {
    font-size: 85px;
  }
}

引入

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  css: ['@/assets/css/base.ignore.css'],
  postcss: {
    plugins: {
      'tailwindcss': {},
      'postcss-pxtorem': {
        rootValue: 50,
        propList: ['*'],
        mediaQuery: false,
        exclude: 'ignore',
      },
    },
  },
})

亲测 解决！

补充说明

在使用了pxtorem这个插件以后，如果有px不想被转化为rem 可以采用exclude: 'ignore',这个配置项