# vue-axios

**Repository Path**: swantbo/vue-axios

## Basic Information

- **Project Name**: vue-axios
- **Description**: Vue Axios封装和跨域问题
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-09-12
- **Last Updated**: 2021-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-axios

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### Vue Axios封装和跨域问题
##### 参考vue-cli3环境配置文件和模式（请尽量参考文档，已经写的很详细了）
```
	个人理解，.env文件为全局环境变量，可以在启动的项目中任何位置使用，主要用于线上环境和开发环境的配置文件替换。
```
### .env.development 模式用于serve，开发环境，就是开始环境的时候会引用这个文件里面的配置
### .env.production模式用于build，线上环境。

#### 拿现在用上的项目来讲解一下：

##### 在项目的根目录下创建这两个文件，里面设置对应的变量

##### 开发环境：
```
	//.env.development 
	VUE_APP_BASE_API = '/api/'
```
#### 线上环境：
```
	//.env.production
	VUE_APP_BASE_API = ''
```

### 。在vue.config.js文件里面配置个接口请求代理，请参考vue-cli3的全局配置中的devServer.proxy
```
	module.exports = {
    devServer: {
        port: 8002, // 端口号，如果端口号被占用，会自动提升1
        host: "localhost", //主机名， 127.0.0.1， 真机 0.0.0.0
        https: false, //协议
        open: true, //启动服务时自动打开浏览器访问
        proxy: {  // 开发环境代理配置
            // '/dev-api': {  // 意思是当请求是以 dev-api 开头的请求，都走代理
            [process.env.VUE_APP_BASE_API]: {
                // 目标服务器地址，代理访问：http://localhost:8001
                target: 'http://localhost:8001', 
                // target:  process.env.VUE_APP_HT_URL,  // 我改成这种失败了，请求500 大佬知道原因教我！！！ 
                changeOrigin: true,   // 开启代理服务器，就会给你代理转发
                pathRewrite: {
                    // /dev-api/db.json 最终会转发到 http://localhost:8001/db.json
                    // '^/dev-api': '',  // 就是将请求地址中的 /dev-api 前缀替换成空的
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    },
    lintOnSave: false, // 关闭格式检查
    productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度
}
```
### 封装的axios
```
	import axios from 'axios'
	const request = axios.create({
		// baseURL: '/dev-api',   // 基础路径，默认是/ ，如果改了，会自动添加到你请求url前面
	  baseURL:process.env.VUE_APP_BASE_API,
	  // 请求超时
	  timeout:5000 
	})

	// 请求拦截器
	request.interceptors.request.use(config=>{
	  // 在发送请求前做什么
	  return config;
	}, (err)=>{
	  return Promise.reject(err);
	});

	// 相应拦截器
	request.interceptors.response.use(response =>{
		  // 在2xx范围内的任何状态代码都会触发此功能
		// 处理响应数据
	  return response;
	},(err)=>{
		  // 任何超出2xx范围的状态代码都会触发此功能
		// 处理响应错误
	  return Promise.reject(err);
	})

	// 导出封装的axios
	export default request; 
```