vue3+typeScript+vite项目开发的一些基本配置_usemock:true 影响图片-CSDN博客

本文链接：https://blog.csdn.net/qq_40501188/article/details/122193343

对于兼容多个后端服务器的代理设置

vite.config.ts在serve中设置proxy

proxy: {
        '/api': {
          target: 'http://jsonplaceholder.typicode.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
        '^/fallback/.*': {
	        target: 'http://jsonplaceholder.typicode.com',
	        changeOrigin: true,
	        rewrite: (path) => path.replace(/^\/fallback/, '')
      	},
},

注意：配置文件更改后一定要重新启动项目，否则配置不生效！！！

在使用开源项目中，大部分关闭了mock数据，开启后可使用

在.env的文件内将是否使用mock数据这里改为true：VITE_USE_MOCK = true

关于利用mock数据模拟后端接口进行开发的过程可以分为下述三个步骤：

在.vue文件中引入接口所在的api文件
在对应的api文件中声明接口
在mock数据对应的文件内写入接口的请求、返回参数

axios配置

在开发前首先要明确接口返回的格式，并在axios中配置自己接口的格式，避免因为格式问题导致接口不能正常显示的问题
在types中的axios.d.ts文件中配置接口返回格式，例如：

export interface Result<T = any> {
  code: number;
  type: 'success' | 'error' | 'warning';
  message: string;
  result: T;
  data: T;
  meta: {
    code: string;
    message: string;
    success: true;
  };
  pageInfo: {
    pageNum: number;
    pageSize: number;
    total: number;
  };
}

封装请求函数：

function createAxios(opt?: Partial<CreateAxiosOptions>) {
  return new VAxios(
    deepMerge(
      {
        // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
        // authentication schemes，e.g: Bearer
        // authenticationScheme: 'Bearer',
        authenticationScheme: '',
        timeout: 10 * 1000,
        // 基础接口地址
        // baseURL: globSetting.apiUrl,
        // 接口可能会有通用的地址部分，可以统一抽取出来
        urlPrefix: urlPrefix,
        headers: { 'Content-Type': ContentTypeEnum.JSON },
        // 如果是form-data格式
        // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
        // 数据处理方式
        transform,
        // 配置项，下面的选项都可以在独立的接口请求中覆盖
        requestOptions: {
          // 默认将prefix 添加到url
          joinPrefix: true,
          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
          isReturnNativeResponse: false,
          // 需要对返回数据进行处理
          isTransformResponse: true,
          // post请求的时候添加参数到url
          joinParamsToUrl: false,
          // 格式化提交参数时间
          formatDate: true,
          // 异常消息提示类型
          errorMessageMode: 'message',
          // 成功消息提示类型
          successMessageMode: 'success',
          // 接口地址
          apiUrl: globSetting.apiUrl,
          //  是否加入时间戳
          joinTime: true,
          // 忽略重复请求
          ignoreCancelToken: true,
          // 是否携带token
          withToken: true,
        },
      },
      opt || {}
    )
  );
}