vue項目（vue+axios）的一些配置

axios: 相當於ajax，之前是用vue-resourse，不過現在這個模塊不維護了，基本使用axios
vue-router: 是vue的路由
vuex: 是vue的狀態管理,方便組件間通信

 

1、安裝：

npm install axios --save-dev

2、axios配置如下：

// 引入axios
import axios from 'axios'

// 創建axios實例
const httpService = axios.create({
    baseURL: "http://localhost:8081", // url前綴
    timeout: 3000 // 請求超時時間
});

// request攔截器
httpService.interceptors.request.use(
    config => {
        // 根據條件加入token-安全攜帶
        if (true) { // 需自定義
            // 讓每個請求攜帶token
            config.headers['User-Token'] = '';
        }
        return config;
    }, 
    error => {
        // 請求錯誤處理
        Promise.reject(error);
    }
)

// respone攔截器
httpService.interceptors.response.use(
    response => {
        // 統一處理狀態
        const res = response.data;
        if (res.statuscode != 1) { // 需自定義
            // 返回異常
            return Promise.reject({
                status: res.statuscode,
                message: res.message
            });
        } else {
            return response.data;
        }
    },
    // 處理處理
    error => {
         if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '錯誤請求';
                    break;
                case 401:
                    error.message = '未授權，請重新登錄';
                    break;
                case 403:
                    error.message = '拒絕訪問';
                    break;
                case 404:
                    error.message = '請求錯誤,未找到該資源';
                    break;
                case 405:
                    error.message = '請求方法未允許';
                    break;
                case 408:
                    error.message = '請求超時';
                    break;
                case 500:
                    error.message = '服務器端出錯';
                    break;
                case 501:
                    error.message = '網絡未實現';
                    break;
                case 502:
                    error.message = '網絡錯誤';
                    break;
                case 503:
                    error.message = '服務不可用';
                    break;
                case 504:
                    error.message = '網絡超時';
                    break;
                case 505:
                    error.message = 'http版本不支持該請求';
                    break;
                default:
                    error.message = `未知錯誤${error.response.status}`;
            }
        } else {
            error.message = "連接到服務器失敗";
        }
        return Promise.reject(error);
    }
)

/*網絡請求部分*/

/*
 *  get請求
 *  url:請求地址
 *  params:參數
 * */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  post請求
 *  url:請求地址
 *  params:參數
 * */
export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  文件上傳
 *  url:請求地址
 *  params:參數
 * */
export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

export default {
    get,
    post,
    fileUpload
}

3、main.js配置：

import axios from './util/axios'

Vue.prototype.$ajax = axios
//this.$ajax.post('/login/login', {});

4、解決vue-cli測試端口隨時變化的方式：

npm install portfinder@1.0.21//在當前機器上查找打開端口的簡單工具

5、打包項目：

npm run build

6、nginx前端服務器：
修改服務器默認端口
將打包后的項目文件dist目錄下的文件放入nginx/html更目錄。

cd D:\nginx-1.17.3//進入nginx安裝目錄
start nginx//啟動nginx服務器
tasklist /fi "imagename eq nginx.exe"//查看nginx任務進程

# 重啟Nginx
nginx -s reload
# 強制停止nginx服務器，如果有未處理的數據，丟棄
nginx -s stop

# 優雅的停止nginx服務器，如果有未處理的數據，等待處理完成之后停止
nginx -s quit