vue-cli 搭建的项目处理不同环境下请求不同域名的问题

Posted raind

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli 搭建的项目处理不同环境下请求不同域名的问题相关的知识,希望对你有一定的参考价值。

使用 vue-cli 开发项目过程中, 根据开发环境和正式环境不同, 我们往往需要请求不同域名下的后台接口, 这时候, 该怎么去设置, 达到同一种写法可以根据环境不同而自动切换请求域名呢? 本文将会介绍两种配置方式.

本文中所有请求都是使用 axios

一、

1、修改 config/dev.env.js (开发环境的配置)

‘use strict‘
const merge = require(‘webpack-merge‘)
const prodEnv = require(‘./prod.env‘)

module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
  API_HOST: ‘"http://localhost:3000"‘ // 开发环境接口地址(这里是增加的内容)
})

2、 修改 config/prod.env.js (正式环境的配置)

‘use strict‘
module.exports = {
  NODE_ENV: ‘"production"‘,
  API_HOST: ‘"http://localhost:8888"‘  // 正式环境接口地址(这里是增加的内容)
}

3、 使用 axios 发送请求

axios.get(process.env.API_HOST + ‘/api/userData‘) // 请求前加上 `process.env.API_HOST`
  .then(data => {
    console.log(data)
  })

二、

第二种方法主要使用 axios 的创建实例的用法

main.js 配置 axios

import axios from ‘axios‘

const host = process.env.NODE_ENV === ‘development‘ ? ‘dev api host‘ : ‘prod api host‘ // 根据 process.env.NODE_ENV 的值判断当前是什么环境
const instance = axios.create({
  baseURL: host
})

Vue.prototype.$http = instance

在组件中调用

this.$http.get(‘/api/userData‘)
  .then(data => {
    console.log(data)
  })

个人一般采用第二种方式,因为写的方便

以上是关于vue-cli 搭建的项目处理不同环境下请求不同域名的问题的主要内容,如果未能解决你的问题,请参考以下文章

前端处理跨域请求(含vue的处理方式)

vue-cli项目本地代理实现跨域请求

vue项目中,解决开发与线上 请求接口不同的问题

vue-cli根据不同的命令自动切换不同环境地址

Vue-cli 2.X 如何配置多项目集成环境

vue解决跨域问题的方式