Vue-cli3.0 结合 axios 解决生产环境中的跨域问题

用过 vue-cli2.0 和 vue-cli3.0 搭建项目的应该都发现了，vue-cli3.0 创建出的项目和之前的有了很多的不同，尤其是目录部分，隐藏了很多配置文件，那么我们该怎么配置开发环境中的跨域问题和生产环境，vue 脚手架和 axios 的安装及使用在这里我就不多说了，不知道的可以看这里 vue-cli3.0 安装和 axios 安装。

# 添加配置文件

在根目录下创建以下两个文件

.env.development //开发环境
.env.production  //生产环境

1
2

如下图所示：

打开 .env.development 文件并写入

VUE_APP_URL = "/api" // 跨域前缀 当然也可以写你的开发实际地址

打开 .env.production 文件并写入

VUE_APP_URL = "http://127.0.0.0" // http://127.0.0.0 为你的实际开发接口地址

在根目录下新建 vue.config.js 文件并写入

module.exports = {
    devServer: {
      port: 80,
      sockHost: 'http://127.0.0.0',
      disableHostCheck: true,
      open: true,
      host: "localhost",
      proxy: {
        '/api': {
          target: 'http://127.0.0.0',   //后台接口
          changeOrigin: true,
          ws: false,
          pathRewrite: {
            '^/api': '' //请求前缀
          }
        }
      },
  
    },
    //输出打包文件目录
    outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist'
    // lintOnSave: false // 取消 eslint 验证
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如下图所示：

# 配合 axios 使用解决跨域问题

打开main.js文件添加以下内容

//挂载 api
import axios from 'axios'; 
import qs from 'qs';
axios.defaults.baseURL = process.env.VUE_APP_URL; //根据环境的不同为 axios 添加基础 url 
Vue.prototype.$axios = axios;  
Vue.prototype.$qs = qs;

1
2
3
4
5
6

若在开发环境下 process.env.VUE_APP_URL 的值为 .env.development 文件中配置的值（npm run dev）
若在生产环境下 process.env.VUE_APP_URL 的值为 .env.production 文件中配置的值 （npm run build）

# 使用方法

let data = {
    id: 0,
    name: '名字'
};

// get 请求
this.$axios.post('/person/art', this.$qs.stringify(data)).then((res) => {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});

// post 请求
this.$axios.get('/person/art', { params: { personId: data.id } }).then((res) => {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在本示例中：

当 npm run dev 时 /person/art 会被替换成 /api

当 npm run build 时 /person/art 会被替换成 /http://127.0.0.0

#Vue

上次更新: 2024/01/30, 00:35:17

← Vue-cli3.0 监听路由变化的几种方式 vue-cli3.0移动端项目将px转换成rem→