vuecli4 页面适配

使用插件对移动端的页面进行适配

1.

引入与安装 amfe-flexible

npm i -S amfe-flexible

在项目的入口main.js文件中引入amfe-flexible:

import "amfe-flexible";

2.

 使用postcss-px2rem自动将css中的px转换成rem

安装postcss-px2rem ：　

npm install postcss-px2rem --save-dev

3.找到public中index.html文件

用上面的代码替换下面的在代码

4.在vue.config.js中加入配置项 (如果没有vue.config.js就直接根目录(package.json同级)新建一个)

module.exports = {
//   publicPath: "./",    //打包的时候用变成相对路径不需要可以不管
  css: {
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },

      postcss: {
        // options here will be passed to postcss-loader
        plugins: [
          require("postcss-px2rem")({
            remUnit: 37.5, //设计稿的 十分之一
            exclude: /node_modules/i,
          }),
        ],
      },
    },
  },
};

5.测试，在viwes文件夹下的Home.vue复制下面的代码