vue-cli配置、网络请求配置、移动端配置

# vue-cli配置：vue.config.js配置文件

• 配置文件夹别名
• 配置服务器代理，解决跨域

const path = require('path');

//拼接路径
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    // 配置别名
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .set('@views', resolve('src/views'))
    },

    // 配置代理
    devServer:{
        proxy:{
             // 匹配请求路径，凡是含有“/api”的请求，就会替代URL，并且删除“/api”字段，
             //  例如“http://localhost:8080/api/home”,会变成“http://localhost:3000/home”
            '/api':{    
                target:'http://localhost:3000', // 为谁做代理，服务器的地址 
                pathRewrite:{
                    '^/api':""
                }
            }
        }
    }
}

// 配置代理基础路径文件agent.js
export default {
    basaUrl:{
        // dev:"http://localhost:3000",// 开发测试API URL  => npm run serve   =>  process.env.NODE_ENV = "developemnt"
        dev:"/api/",
        pro:"http://loaclhost:8080",// 线上API URL  =>  npm run build   =>  process.env.NODE_ENV = "product"
    }
}

#网络请求配置

#安装axios，完成ajax请求:npm i axios -S

// 配置路径
export default {
    basaUrl:{
        dev:"http://localhost:3000",// 开发测试API URL  => npm run serve   =>  process.env.NODE_ENV = "developemnt"
        // dev:"/api/",
        pro:"http://loaclhost:8080",// 线上API URL  =>  npm run build   =>  process.env.NODE_ENV = "product"
    }
}

/**
 * @title axios简单配置
 */

import axios from 'axios'
import config from '@/config'

// 全局默认路径BaseURL
axios.defaults.baseURL = (process.env.NODE_ENV == 'development') ? config.basaUrl.dev : config.basaUrl.pro;

// config
// axios.defaults.withCredentials = true;// 携带cookie

// 拦截器Interceptors
axios.interceptors.request.use(config => {  // 在发送请求之前做些什么
    return config
}, error => {
    return Promise.reject(error)
})
axios.interceptors.response.use(response => {   // 对响应数据做点什么
    return response.data;
}, error => {
    return Promise.reject(error)
})

const axiosSimpleConfig = axios;
export default axiosSimpleConfig;

#移动端配置

#移动端响应式布局方案：Rem响应式方案

/**
 * rem布局配置（绝不是每个地方都要用rem，rem只适用于固定尺寸！）
 * 特点：屏幕越大元素越大
 */
(function(){
    function resize(){
        var baseFontSize = 100; // 根据设计稿的要求而定，1rem = 100px;
        var designWidth = 750;// 设计稿的宽度
        var width = window.innerWidth;//屏幕的宽度
        if(width >= 750){
            width = 750;
        }
        var currentFontSize = (width / designWidth) * baseFontSize;
        document.querySelector('html').style.fontSize = currentFontSize + "px";
    }

    // 第一次文档加载完毕之后，触发
    document.addEventListener('DOMContentLoaded',resize)

    // 尺寸改变后，触发
    window.onresize = function(){
        resize()
    }
})()


// 在main.js中，引入
import "@/utils/rem.js"

#解决移动端点击延迟300ms：npm i fastclick -S

// 在main.js中，引入
import FastClick from 'fastclick'
FastClick.attach(document.body);