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