项目改造与基础配置

pnpm install @types/node -D

blog.csdn.net/qq991658923…

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import path from 'path';
import {
  VantResolver,
  NaiveUiResolver,
} from 'unplugin-vue-components/resolvers';

export default defineConfig({
  base: './',
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src'),
    },
  },
  plugins: [
    vue(),
    Components({
      resolvers: [NaiveUiResolver(), VantResolver()],
    }),
  ],
  server: {
    // 是否开启 https
    https: false,
    // 端口号
    port: 3000,
    // 监听所有地址
    host: '0.0.0.0',
    // 服务启动时是否自动打开浏览器
    open: true,
    // 允许跨域
    cors: true,
    // 自定义代理规则
    proxy: {},
  },
  build: {
    // 设置最终构建的浏览器兼容目标
    target: 'es2015',
    // 构建后是否生成 source map 文件
    sourcemap: false,
    //  chunk 大小警告的限制（以 kbs 为单位）
    chunkSizeWarningLimit: 2000,
    // 启用/禁用 gzip 压缩大小报告
    reportCompressedSize: false,
  },
});

request.ts

import axios from 'axios';

// 创建请求实例
const instance = axios.create({
  baseURL: '/api',
  timeout: 1000, // 指定请求超时的毫秒数
  withCredentials: false, // 表示跨域请求时是否需要使用凭证
});

// 前置拦截器（发起请求之前的拦截）
instance.interceptors.request.use(
  (config) => {
    // const token = getToken()
    // if (token) {
    //  config.headers.token = token
    // }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 后置拦截器（获取到响应时的拦截）
instance.interceptors.response.use(
  (response) => {
    // 根据你的项目实际情况来对 response 和 error 做处理
    // 这里对 response 和 error 不做任何处理，直接返回
    return response;
  },
  (error) => {
    const { response } = error;
    if (response && response.data) {
      return Promise.reject(error);
    }
    const { message } = error;
    console.error(message);
    return Promise.reject(error);
  }
);

/**
 * post请求
 *
 * @param {string} url
 * @param {object} data
 * @param {object} params
 */
export const post = (url: string, data = {}, params = {}) => {
  return instance({
    method: 'post',
    url,
    data,
    params,
  });
};

/**
 * get请求
 *
 * @param {string} url
 * @param {object} params
 */
export const get = (url: string, params = {}) => {
  return instance({
    method: 'get',
    url,
    params,
  });
};

/**
 * put请求
 *
 * @param {string} url
 * @param {object} data
 * @param {object} params
 */
export const put = (url: string, data = {}, params = {}) => {
  return instance({
    method: 'put',
    url,
    params,
    data,
  });
};

/**
 * delete请求
 *
 * @param {string} url
 * @param {object} params
 */
export const _delete = (url: string, params = {}) => {
  return instance({
    method: 'delete',
    url,
    params,
  });
};

export default instance;

在此处发现别名配置不生效

配置tsconfig.json的compilerOptions节点

"baseUrl": "./",
"paths": {
  "~/*":["src/*"]
},

api示例

import { get, post } from '~/common/request';

export default class User {
  static async login() {
    return post('', {});
  }
  static async login2() {
    return get('', {});
  }
}