Vue3 - 移动端配置Rem布局

1、项目搭建

2、安装插件

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

3、引入插件

import 'amfe-flexible'
// main.ts

4、vite.config.ts 配置

import { defineConfig } from 'vite'
import postCssPxToRem from 'postcss-pxtorem'

export default defineConfig({
  // ...
  css: {
    postcss: {
      plugins: [
        // 移动端自适应rem布局
        postCssPxToRem({
          // 1rem的大小
          rootValue: 37.5,
          // 需要转换的属性，这里选择全部都进行转换
          propList: ['*'],
        }),
      ],
    },
  }
})

5、Bug（可能遇到的问题）

• main.ts 中 引入 'amfe-flexible' 时，可能会报错

  /** 无法找到模块“amfe-flexible”的声明文件。“.../node_modules/amfe-flexible/index.js” 隐式拥有 "any" 类型。尝试使用 `npm i --save-dev @types/amfe-flexible`(如果存在)，或者添加一个包含 `declare module 'amfe-flexible';` 的新声明(.d.ts)文件 **/

• 产生原因： 在使用 Typescript 的过程中， 第三方类库并没有ts的.d.ts 类型的声明文件
• 解决方案
  • 1、npm i 重新下载依赖
  • 2、src 目录下，创建 'types' 文件夹
    •