开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第33天，点击查看活动详情

前言

在学习中使用vite新建了项目，在vite项目中的一些配置处理和webpack有些许差异，今天记录以下vite项目中axios的配置和代理服务器等问题

配置axios

首先要安装axios

npm install --save axios

接着需要在utils中创建request.js文件，该文件会导出一个axios的实例，当我们请求接口时，引入该实例

utils/request.js

在文件中需要导入axios，并构建出axios实例，构建时需要传入一个配置对象，包括请求拼接的地址和超时时间

import axios from 'axios'

const service = axios.create({
  baseURL: ···········,
  timeout: 5000
})

export default service

在请求接口时，新建api/test.js，request用法如下

import request from '@/utils/request'

export const getCategory = () => {
  return request({
    url: '/category',
    method: 'get'
  })
}

使用上述请求接口后，可以看到控制台

显而易见是跨域问题，下面就需要处理跨域问题

跨域

在webpack构建的项目中，我们可以使用proxy代理解决跨域

vue.config.js

在vite中也提供了proxy的配置项，具体的使用方式和webpack中的proxy基本没有区别，只不过将webpack中devServer配置项变为server配置项

点击跳转server.proxy

首先需要修改service实例中的baseURL，不再需要一个完整的url，只需要指定/api，通过proxy代理/api的请求即可

const service = axios.create({
  baseURL: '/api',
  timeout: 5000
})

接着需要在vite.config.js中进行代理配置

export default defineConfig({
  plugins: [vue()],
  // 软链接
  resolve: {
    alias: {
      '@': join(__dirname, '/src')
    }
  },
  // 代理配置
  server: {
    proxy: {
      // 指定代理所有/api请求
      '/api': {
        // 代理请求之后的请求地址
        target: 'https://·········,
        // 跨域
        changeOrigin: true
      }
    }
  }
})

配置完成后，重启项目，调用接口后打开控制台

可以看到请求成功

环境变量

通常在开发中会区分开发时服务和生产时服务，在开发时服务为DEV模式，打包后切换为PORD模式，在开始使用的接口为模拟数据，上线后需要使用真实接口，而我们希望可以根据项目的状态动态切换请求的服务地址

vite提供了.env文件，其中.env.mode可以在不同模式下加载不同的状态，我们使用它解决这个问题

新建.env.development表示开发时.env文件

# 开发时加载

// 此处为开发时接口
VITE_BASE_API = '/api'

新建.env.production表示生产时.env文件

# 发布时加载

// 生产时接口
VITE_BASE_API = '····'

之后就可以通过import.meta.env.VITE_BASE_API去访问当前的接口

request.js中打印

console.log(import.meta.env.VITE_BASE_API)

如果打包后，进入打包目录执行anywhere指令后，在打开的网页控制台可以看到打印的为生产时接口，如此根据环境便能动态的切换接口地址

vite搭建项目的axios配置，处理代理及环境变量

前言

配置axios

跨域

环境变量