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

时间 2019-11-24

标签 vue cli 搭建项目处理不一样环境请求域名问题繁體版

原文原文链接

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

本文中全部请求都是使用 axiosvue

一

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

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

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

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

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

三、使用 axios 发送请求ios

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

二

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

在 main.js 配置 axiosgithub

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
复制代码

在组件中调用web

this.$http.get('/api/userData')
  .then(data => {
    console.log(data)
  })
复制代码

我的通常采用第二种方式，由于写的方便。不知你们都是怎么处理这个问题，欢迎分享。若是文章中有任何问题或者有更好的方式，也欢迎指正。vue-cli

文章很差，也仅是分享个人一些观点，感谢观看！axios