lib-flexible vue項目（移動端適配）

移動端適配步驟

1.安裝lib-flexible(npm install lib-flexible --save-dev)

2.在main.js 中引入lib-flexible(import 'lib-flexible')   //px2rem自適應

3.安裝px2rem-loader(npm install px2rem-loader --save-dev)

4.配置px2rem-loader

  ①vue-cli 2.x 

  ②vue-cli 3.x

  2.x 步驟：

  在build/utils.js中,找到exports.cssLoaders，作出如下修改：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUint: 75 // 以設計稿750爲例， 750 / 10 = 75
    }
}

繼續找到generateLoaders中的loaders配置，作出如下配置：

// 註釋掉這一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改爲
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

重新npm run dev

3.x步驟：

在項目根目錄新建文件vue.config.js，添加如下代碼後並npm run dev

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以設計稿750爲例， 750 / 10 = 75
                        remUnit: 75
                    }),
                ]
            }
        }
    },
};