vue-cli配置浊洞、網(wǎng)絡請求配置洗鸵、移動端配置

# 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",// 開發(fā)測試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"
    }
}

#網(wǎng)絡請求配置

#安裝axios，完成ajax請求:npm i axios -S

// 配置路徑
export default {
    basaUrl:{
        dev:"http://localhost:3000",// 開發(fā)測試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 => {  // 在發(fā)送請求之前做些什么
    return config
}, error => {
    return Promise.reject(error)
})
axios.interceptors.response.use(response => {   // 對響應數(shù)據(jù)做點什么
    return response.data;
}, error => {
    return Promise.reject(error)
})

const axiosSimpleConfig = axios;
export default axiosSimpleConfig;

#移動端配置

#移動端響應式布局方案：Rem響應式方案

/**
 * rem布局配置（絕不是每個地方都要用rem痛单，rem只適用于固定尺寸：偌）
 * 特點：屏幕越大元素越大
 */
(function(){
    function resize(){
        var baseFontSize = 100; // 根據(jù)設計稿的要求而定，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";
    }

    // 第一次文檔加載完畢之后旭绒，觸發(fā)
    document.addEventListener('DOMContentLoaded',resize)

    // 尺寸改變后鸟妙，觸發(fā)
    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);