Vite2+vue3+ts引用axios,配置环境变量

安装 Axios 并封装，再配置环境变量

本章节源码:Lzq811/vite-vue-ts-eslint at vite+vue3+ts 引入 axios 并做二次封装 (github.com)

1. 安装使用 Axios

1. install

yarn add axios

2. 封装

• 在 src 文件夹下新建 api 文件，并在 api 文件夹下新建 index.tsx 和 ajax.tsx 两个文件

  // ajax.tsx
  import axios from 'axios'
  
  import { ElMessage } from 'element-plus'
  
  interface IParams {}
  
  const ajax = (url: string, data: IParams = {}, type: string = 'POST') => {
    return new Promise((resolve: any) => {
      let promise
      if (type === 'GET') {
        promise = axios.get(url, { params: data })
      } else if (type === 'POST') {
        promise = axios.post(url, data)
      }
      promise
        ?.then((response: any) => {
          resolve(response.data)
        })
        .catch((error: any) => {
          ElMessage.error('数据获取失败!')
          console.log(error)
        })
    })
  }
  
  export default ajax
  

  // index.tsx
  import ajax from './ajax'
  
  // 后台地址
  const BASE: string = 'http://xxx.xxx.xx:8087'
  
  interface IParrms {
    username: string
    password: string
  }
  // ajax接三个参数，url必填, params默认空对象可以不写, get或者post默认post可以不写,
  // 登陆login
  export const ReqLogin = (params: IParrms) => ajax(`${BASE}/login`, params)
  
  // 测试获取狗狗照片 到App.vue中执行获取动作
  export const ReqGetDogs = () => ajax(`https://dog.ceo/api/breeds/image/random`, {}, 'GET')
  
  

• 在组件中调用接口

  // App.vue
  import { ReqGetDogs } from './api'
  
  onMounted(() => {
    GetDogs()
  })
  const GetDogs = async () => {
    const res = await ReqGetDogs()
    // res就是过滤后要返回的数据
  }
  

2. 配置环境变量

1. 安装cross-env

   yarn add cross-env -D
   

2. 在根目录新建 .env 、 .env.test 和 .env.prod，并写入对应代码

NODE_ENV = 'dev' # dev test prod 对应不同的运行环境
VITE_HOST = 'https://dev.com' # 对应的不同环境的后台地址

3. 修改 api/index.tsx文件

const BASE = 'XXXX'
// 改成
const BASE = import.meta.env.VITE_HOST || `https://XXXX.com`

4. 配置 package.json 的运行脚本

"scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  }
# 改成
"scripts": {
    "dev": "cross-env vite --host 0.0.0.0 --mode dev",
    "start": "cross-env vite --host 0.0.0.0 --mode dev",
    "start-uat": "cross-env vite --host 0.0.0.0 --mode uat",
    "start-prod": "cross-env vite --host 0.0.0.0 --mode prod",
    "build": "cross-env vue-tsc --noEmit && vite build --mode dev",
    "build-test": "cross-env vue-tsc --noEmit && vite build --mode dev",
    "build-uat": "cross-env vue-tsc --noEmit && vite build --mode uat",
    "build-prod": "cross-env vue-tsc --noEmit && vite build --mode prod",
    "serve": "vite preview"
  },

5. 修改 vite.config.ts 的配置

server: {
    open: true, // 启动项目后自动打开浏览器
    port: 3005, // 修改默认的监听端口 3000 -》 3005
    host: '0.0.0.0' // 配合 package.json scripts中 --host 0.0.0.0 来允许通过ip地址来访问服务
  }

本章节源码：Lzq811/vite-vue-ts-eslint at vite+vue3+ts 引入 axios 并做二次封装 (github.com)