vue3.0+vite移动端适配

2022-08-30 1,112 阅读1分钟

下载插件

npm i postcss-pxtorem -D

创建与`package.json`同级目录创建`postcss.config.cjs`文件

// postcss.config.cjs
// 用 vite 创建项目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已经被抛弃
// 具体配置可以去 postcss-pxtorem 仓库看看文档
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

这里只实现了 `px`转`rem`，还要安装 `amfe-flexible`

npm i amfe-flexible -D

在`main.ts`文件中 import 一下就好可以了

import ‘amfe-flexible/index.js’

：可能会出现下面情况
[vite] Internal server error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'

这时候尝试安装 autoprefixer就可以了

npm i autoprefixer