zoukankan      html  css  js  c++  java
  • 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)
      })

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

  • 相关阅读:
    android之Toast多次提示延时处理
    android之双击返回键退出程序
    android之对话框“确定退出吗?”
    数组随机排序
    android全屏显示,去掉标题栏和信息栏
    android四大组件之service生命周期
    android四大组件之activity生命周期
    struct和union,enum分析
    const和volatile分析
    goto,void,extern,sizeof分析
  • 原文地址:https://www.cnblogs.com/raind/p/9224527.html
Copyright © 2011-2022 走看看