vue项目封装api接口事项

vue项目

本项目只提及一些修改的细节，如有错误，可在评论区指出交流。

vue项目目录对应的src文件夹

本章节针对src文件夹下操作：
封装api,需要先创建请求的request.js文件，其次再创建api文件夹，故
第一步：
在src文件夹下创建utils文件夹，这个文件夹放的文件很重要，可以说是封装的关键文件，就是request,js文件
这个request.js文件也是自定义创建的。【csdn上面有很多request.js文件里面的内容，可以参考】。

本人的request文件，也是在csdn上参考的：
详细内容如下：

import axios from 'axios';

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: '/dev-api',
  // 超时
  timeout: 10000,
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    console.log('Request error: ', error);
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (res) => {
    // 未设置状态码则默认成功状态
    const code = res.status || 200;
    // 二进制数据则直接返回
    if (res.status === code) {
      return res;
    } else {
      console.error('Request error: ', res);
      return Promise.reject(new Error('Error with status code ' + res.status));
    }
  },
  (error) => {
    console.log('err' + error);
    let { message } = error;
    if (message == 'Network Error') {
      message = '后端接口连接异常';
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时';
    } else if (message.includes('Request failed with status code')) {
      message = '系统接口' + message.substr(message.length - 3) + '异常';
    }
    return Promise.reject(error);
  }
);
export default service;

第二步：
在src文件夹下创建api文件夹，并在api文件夹下创建你用到的api文件，
我们前端vue项目的接口api文件，都是js文件，所以公共接口应该是js文件

如图所示，api名字你自己随便取，后面我会以我取的这个名字为例。

import request from '@/utils/request';

export function findByLikes(data) {
  return request({
    url: '/findByLikes',
    method: 'get',
    data: data,
  });
}

export function findByTime(data) {
  return request({
    url: '/findByTime',
    method: 'get',
    data: data,
  });
}

export function findByRand(data) {
  return request({
    url: '/findByRand',
    method: 'get',
    data: data,
  });
}

api导入request.js文件，两者建立联系： 【不要掉任何符号，尤其是：@】

import request from '@/utils/request';

第三步：
在根目录下创建两个文件（注意是根目录）

.env.development
.env.production
如图：

这两个似乎是分辨开发环境与生产环境的，具体怎么调用我们应该也用不着：
两个文件内容很相似：

.env.development文件内容：

# 页面标题
VUE_APP_TITLE = '测试环境项目'

#环境信息
ENV = 'development'

#配置代理info
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production文件内容：

# 页面标题
VUE_APP_TITLE = '测试环境项目'

#环境信息
ENV = 'production'

#配置代理info
VUE_APP_BASE_API = '/prod-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

VUE_APP_BASE_API 似有不同，都在vue.config.js文件里面调用

第四步：
最后再看vue.config.js文件，
我网上找了好多博客，没找到一个完整的vue.config.js文件跟request.js以及api联系的，大佬都懒得整合，可能他们是觉得太简单了。

const { defineConfig } = require('@vue/cli-service');

const port = process.env.port || process.env.npm_config_port || 8084; // 端口

module.exports = defineConfig({
  transpileDependencies: true,

  devServer: {
    host: '0.0.0.0',
    port: port, // 此处修改你想要的端口号
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8087`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        },
      },
    },
    // disableHostCheck: true,
  },
});

先说8084 ，devServer里面的这个port你随便写任意，你写多少，浏览器的地址栏就会展示这个数字。相当于代理ip

代理的就是下面proxy 里面的那个target，8087才是后端项目，如下图：
下图是后端项目的连接数据库的文件，

里面的那个server.port 8087 ，就是上面vue.config.js文件里面的 target: http://localhost:8087,
这两个端口才是对应的，
至于那个8084，就是一个暴露的浏览器端口，后端请求，默认还是使用的8087这个端口。
这些改完之后，应该就没问题了

还有一个点就是：

  devServer: {
    host: '0.0.0.0',
    port: port, // 此处修改你想要的端口号
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8087`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        },
      },
    },

process.env.VUE_APP_BASE_API的VUE_APP_BASE_API是如何根据生产环境或者开发环境切换的？有大佬知道的可以评论区说一下，如果有对这个属性详细讲解生产与开发切换的博文，也可以在评论区发链接告知一下。大家互相学习，互相进步