vue-cli配置、網(wǎng)絡(luò)請(qǐng)求配置、移動(dòng)端配置

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

• 配置文件夾別名
• 配置服務(wù)器代理，解決跨域

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:{
             // 匹配請(qǐng)求路徑，凡是含有“/api”的請(qǐng)求，就會(huì)替代URL，并且刪除“/api”字段，
             //  例如“http://localhost:8080/api/home”,會(huì)變成“http://localhost:3000/home”
            '/api':{    
                target:'http://localhost:3000', // 為誰做代理，服務(wù)器的地址 
                pathRewrite:{
                    '^/api':""
                }
            }
        }
    }
}

// 配置代理基礎(chǔ)路徑文件agent.js
export default {
    basaUrl:{
        // dev:"http://localhost:3000",// 開發(fā)測(cè)試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)絡(luò)請(qǐng)求配置

#安裝axios，完成ajax請(qǐng)求:npm i axios -S

// 配置路徑
export default {
    basaUrl:{
        dev:"http://localhost:3000",// 開發(fā)測(cè)試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簡(jiǎn)單配置
 */

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

// 全局默認(rèn)路徑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ā)送請(qǐng)求之前做些什么
    return config
}, error => {
    return Promise.reject(error)
})
axios.interceptors.response.use(response => {   // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
    return response.data;
}, error => {
    return Promise.reject(error)
})

const axiosSimpleConfig = axios;
export default axiosSimpleConfig;

#移動(dòng)端配置

#移動(dòng)端響應(yīng)式布局方案：Rem響應(yīng)式方案

/**
 * rem布局配置（絕不是每個(gè)地方都要用rem，rem只適用于固定尺寸！）
 * 特點(diǎn)：屏幕越大元素越大
 */
(function(){
    function resize(){
        var baseFontSize = 100; // 根據(jù)設(shè)計(jì)稿的要求而定，1rem = 100px;
        var designWidth = 750;// 設(shè)計(jì)稿的寬度
        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"

#解決移動(dòng)端點(diǎn)擊延遲300ms：npm i fastclick -S

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