解决 vue 中安装 postcss-pxtorem 插件，报错等问题

一、Vant 提供了 rem 布局适配

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。

Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件。

Vue CLI 内部使用了 PostCSS。

你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

Autoprefixer 插件的配置

autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。

二、使用 vue 脚手架创建新项目，安装 Vant 组件库，需要使用 rem 单位，安装 postcss-pxtorem 插件，报错了

报错信息： Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end-users:

报错显示需要 postcss-pxtorem 8，开始点进去网站安装其他依赖包，还是没有解决，参考了其他的博客，可以去 npm 上查看 插件的版本，postcss-pxtorem的版本最高才6.0，降低一下版本就可以了

yarn add postcss-pxtorem@5.1.1

需要注意的是：

• 该插件不能转换行内样式中的 px，例如 <div class="box" style="font-size: 70px;"></div>

三、封装请求模块

axios

使用 axios 作为我们项目中的请求库，为了方便使用，我们把它封装为一个请求模块，在需要的时候直接加载即可

1、安装 axios

npm i axios

2、创建 src/utils/request.js

/**
 * 封装 axios 请求模块
 */
import axios from "axios"
​
const request = axios.create({
  baseURL: "http://ttapi.research.itcast.cn/" // 基础路径
})
​
export default request

3、如何使用

• 方式一（简单方便，但是不利于接口维护）：我们可以把请求对象挂载到 Vue.prototype 原型对象中，然后在组件中通过 this.xxx 直接访问
• 方式二（推荐）：我们把每一个请求都封装成每个独立的功能函数，在需要的时候加载调用，这种做法更便于接口的管理和维护

四、