vue3 + vant

搭建项目（h5 自适应）

1. 安装 lib-flexible

    npm install lib-flexible --save-dev

	在main.js中引入lib-flexible

2. 安装 postcss-pxtorem 并配置（创建postcss.config.js文件）

    npm install postcss-pxtorem --save-dev

	2）配置postcss.config

module.exports = {
   plugins: {
     'autoprefixer': {
       browsers: ['Android >= 4.0', 'iOS >= 8']
     },
     'postcss-pxtorem': {
       rootValue: 37.5,
       propList: ['*']
     }
   },
   /* 
    * 如果设计稿的尺寸不是 375，而是 750 或其他大小，(postcss-pxtorem 插件的版本需要 >= 5.0.0)可以将 rootValue 配置调整为:
   */ 
   // plugins: {
   //     'postcss-pxtorem': {
   //         rootValue({ file }) {
   //         return file.indexOf('vant') !== -1 ? 37.5 : 75;
   //         },
   //         propList: ['*'],
   //     },
   // },
}

3. 封装axios

import axios from 'axios'
import { toast } from 'vant'
import 'vant/lib/index.css'
const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API,
   timeout: 10000
})

//添加请求拦截器
service.interceptors.request.use( config => {
   	return config
},error=>{
   return Promise.reject(error);
})

//添加响应拦截器
service.interceptors.response.use(response => {
   const code = response.data && response.data.code || 200
   let msg = ''
   if (code < 200 || code >= 300) {
   	// 处理http错误，抛到业务代码
   	msg = showStatus(code)
   	toast(msg)
   } else {
   	return response.data
   }
},error =>{
   	// 错误抛到业务代码
   	error.data = {}
   	error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！'
   	return Promise.resolve(error)
   }
)
// 根据状态码提示信息
const showStatus = (status) => {
   let message = ''
   switch (status) {
   		case 400:
   			message = '请求错误'
   			break
   		case 401:
   			message = '认证失败，无法访问系统资源'
   			break
   		case 403:
   			message = '当前操作没有权限'
   			break
   		case 404:
   			message = '访问资源不存在'
   			break
   		case 500:
   			message = '服务器错误'
   			break
   		case 501:
   			message = '服务未实现'
   			break
   		case 502:
   			message = '网络错误'
   			break
   		case 503:
   			message = '服务不可用'
   			break
   		case 504:
   			message = '网络超时(504)'
   			break
   		default:
   			message = `连接出错(${status})!`
   }
   return `${message}`
}

export default service;