vue移动端项目中使用postcss-pxtorem进行适配方案

首先，我们先使用vue-cli创建一个初始化的vue项目。

vue create hello-world

当项目创建好以后，我们在根目录下新建一个vue.config.js，想必大家也都懂这个文件是干什么的。

既然是使用postcss-pxtorem对移动端项目进行适配，那肯定先要安装它，于是我们在电脑上敲下这行命令

npm install postcss-pxtorem -D

postcss-pxtorem有一个好伙伴amfe-flexible，也需要一并安装。

npm install amfe-flexible -D

当我们安装好这两个依赖以后呢，我们就要使用它们了，先在main.js中引入amfe-flexible

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入amfe-flexible
import 'amfe-flexible/index'
 
Vue.config.productionTip = false
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然后我们在vue.config.js文件中对postcss-pxtorem进行配置。

const autoprefixer = require('autoprefixer')  // 这个依赖不用安装
const pxtorem = require('postcss-pxtorem')
 
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,  // 根字体大小，如果设计图是750的话 记得除2
            unitPrecision: 5,
            propList: ['*'], // 作用在哪些属性上 我这里用的是通配符
            selectorBlackList: ['vant-'], // 将哪些html元素排除在外，我这里添加了一个vant的
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
            exclude: /node_modules/i
          })
        ]
      }
    }
  }
}

原文链接：https://blog.csdn.net/g1197410313/article/details/107727431