在vue-cli3/4中使用px2rem做到移動端適配

首先在項目目錄安裝

npm install px2rem-loader --save
npm install amfe-flexible --save

裝好后會在package.json中看到

在main.js中導入amfe-flexible

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible'

import('./assets/css/reset.css')
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在vue.config.js中配置

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({remUnit: 37.5}),
                ]
            }
        }
    },
}

其中remUnit為換算的基數

對了，不要忘記設置meta標簽

<meta name="viewport" content="width=device-width, initial-scale=1.0">

啟動項目后會看到已經應用成功