【Vue3】封装axios请求（cli和vite）

原文作者：我辈李想
版权声明：文章原创，转载时请务必加上原文超链接、作者信息和本声明。

Vue

【Vue3】env环境变量的配置和使用（区分cli和vite）

---

---

前言

---

一、常见用法

我们将创建api文件夹，包含index.js和request.js，剩下的rule.js就是实际接口文件。

二、vue3+cli封装接口

vue3+cli的项目，配置中需要以VUE_APP开头。

1…env配置

VUE_APP_PORT = 8080

2…dev(开发环境，其他环境自己配置)

VUE_APP_API_HOST = '127.0.0.1'
VUE_APP_API_HOST = '8000'
VUE_APP_API_BASE_URL = "http://127.0.0.1:8000/api"

VUE_APP_ENV = 'development'

3.vue.config.js文件

如果项目没有此文件，需要自己创建，位置参考第一部分截图。
这里的devServer配置表示代理，即将前端的host、port和路由代理至api接口。其中’/api’很重要，后边会用到。
下述代码表示将http://127.0.0.1:8080/api代理至http://127.0.0.1:8000/api)

const {
   
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
   
	transpileDependencies: true,
	assetsDir: 'static',

	devServer: {
   
		// host: process.env.VUE_APP_HOST,
		// port: process.env.VUE_APP_PORT, //端口
		// https: false, //false关闭https，true为开启
		// open: true, //自动打开浏览器
		proxy: {
   
			'/api': {
   
				target: process.env.VUE_APP_API_BASE_URL,
				changeOrigin: true,
				pathRewrite: {<