移动端适配步骤
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 = 75remUnit: 75}),]}}},};
