vue-cli 搭建的项目处置惩罚差别环境下要求差别域名的题目

2024年4月29日 188次阅读 来源: 善良的乌贼

运用
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)
  })

个人平常采纳第二种体式格局，由于写的轻易。不知人人都是怎样处置惩罚这个题目，迎接分享。假如文章中有任何题目或许有更好的体式格局，也迎接斧正。

文章不好，也仅是分享我的一些看法，谢谢寓目！

    原文作者：善良的乌贼
    原文地址: https://segmentfault.com/a/1190000013752901
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞