首先，我們先使用vue-cli創(chuàng)建一個(gè)初始化的vue項(xiàng)目。

vue create hello-world

當(dāng)項(xiàng)目創(chuàng)建好以后，我們在根目錄下新建一個(gè)vue.config.js，想必大家也都懂這個(gè)文件是干什么的。

既然是使用postcss-pxtorem對移動(dòng)端項(xiàng)目進(jìn)行適配，那肯定先要安裝它，于是我們在電腦上敲下這行命令

npm install postcss-pxtorem -D

postcss-pxtorem有一個(gè)好伙伴amfe-flexible，也需要一并安裝。

npm install amfe-flexible -D

當(dāng)我們安裝好這兩個(gè)依賴以后呢，我們就要使用它們了，先在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進(jìn)行配置。

const autoprefixer = require('autoprefixer')  // 這個(gè)依賴不用安裝
const pxtorem = require('postcss-pxtorem')
 
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,  // 根字體大小，如果設(shè)計(jì)圖是750的話 記得除2
            unitPrecision: 5,
            propList: ['*'], // 作用在哪些屬性上 我這里用的是通配符
            selectorBlackList: ['vant-'], // 將哪些html元素排除在外，我這里添加了一個(gè)vant的
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
            exclude: /node_modules/i
          })
        ]
      }
    }
  }
}

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