vue項目-全家桶（vue+vue-router+vuex+axios）

axios: 至關於ajax，以前是用vue-resourse，不過如今這個模塊不維護了，基本使用axios
vue-router: 是vue的路由
vuex: 是vue的狀態管理,方便組件間通訊

npm install vuex axios --save-dev

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
}

main.js配置：

import axios from './util/axios'

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

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

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

打包項目：

npm run build

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