Vue项目中经常碰到的痛点和解决方法(上)

1. 本地开发环境请求服务器接口跨域问题
2. axios封装和api接口的统一管理
3. UI库的引入
4. 覆盖当前UI库中组件的样式
5. rem文件的导入问题
6. 定时器
7. 打包后.map文件很大
8. 开启gizp压缩代码
9. mixins常见操作
10. 打包之后路径找不到的问题

本地开发请求服务器接口跨域问题

这应该是每个新手或者说不熟悉vue的人的必经之路。

本地开发请求服务器接口的时候，因为客户端的同源策略，所以会出现跨域。遇到这种问题直接在vue.config.js中配置代理。

 proxy: {
      //配置跨域
      '/api': {
          target: "http://localhost:8888",
          // ws:true,
          changOrigin:true,   //启动跨域
          pathRewrite:{
              '^/api':'/'
          }
      }

target设置成你调用的接口域名和端口号，pathRewrite这里其实就是用/api代替target里的地址。

注意：配置好之后一定要重新跑一下项目（npm run dev）

axios封装和api接口的统一管理

一般都是在根目录下创建一个工具类的文件夹 ，然后新建一个request.js（名字可以自定义），然后定义个api.js，前者是用来封装axios,后者是用来统一管理api接口。

request.js

import axios from 'axios'
import store from '@/store'
import { Toast } from 'vant'
// 根据环境不同引入不同api地址
import { baseApi } from '@/config'
console.log(baseApi)
// create an axios instance
const service = axios.create({
  baseURL: baseApi, // url = base api url + request url
  withCredentials: true, // send cookies when cross-domain requests
  // timeout: 5000 // request timeout
})

// request拦截器 request interceptor
service.interceptors.request.use(
  config => {
    // 不传递默认开启loading
    if (!config.hideloading) {
      // loading
      Toast.loading({
        duration: 0,
        forbidClick: true
      })
    }
    if (store.getters.token) {
      config.headers['X-Token'] = ''
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// respone拦截器
service.interceptors.response.use(
  response => {
    Toast.clear()
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    Toast.clear()
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

api.js

import api from './index'
// axios
import request from '@/utils/request'

export function queryPageNews(data) {
  return request({
    url: api.queryPageNews,
    method: 'post',
    data
  })

由于时间关系，之后我们再做一期axios封装和api接口的统一管理，再对这个封装细化 优化，比如。分模块以及断网情况的分析。

UI库的引入

这里说的ui库是vant，其他的依次类推的。

安装

npm vant -S

安装babel-plugin-import插件使其按需加载

npm i babel-plugin-import -D

然后在 .babelrc文件中中添加插件配置 ：

libraryDirectory { 
    "plugins": [ 
        // 这里是原来的代码部分
        // …………

        // 这里是要我们配置的代码
        ["import", 
            { 
                "libraryName": "vant", 
                "libraryDirectory": "es", 
                "style": true 
            }
        ] 
    ] 
}

在main.js中按需加载你的插件

// 按需引入vant组件
import {   
    DatetimePicker,   
    Button,   
    List 
} from 'vant';

覆盖当前UI库中组件的样式

我们正常写的所有样式，都会被加上[data-v-23d425f8]这个属性，第三个组件内部的标签并没有编译[data-v-23d425f8]这个属性，所以就没有办法修改。但是，一般我们都是直接行内添加class,然后在一个公共的css中写样式，但是会遇到一个问题。如果你在当前页面加上了socped属性，那就没有效果。

但是通过深度选择器解决。

.vant-tabs /deep/ .footer{color:red}

当然了这里的深度选择器前提是用了less/sass语言，如果没有的话就用>>>符号，是一样的效果。