快捷導(dǎo)航

vue - vue.config.js中devServer配置方式

更新時(shí)間：2019年10月30日 10:05:44 作者：idomyway

今天小編就為大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

前言

這里寫(xiě)你調(diào)用接口的基礎(chǔ)路徑，來(lái)解決跨域，如果設(shè)置了代理，那你本地開(kāi)發(fā)環(huán)境的axios的baseUrl要寫(xiě)為''，即空字符串

只有一個(gè)接口ip端口時(shí)

devServer: {
  open: false,
  // 跨域
  proxy: {
   '/nuojinadm/': {
    target: 'http://192.168.0.11/',
    changeOrigin: true
   }
  }
 }

2、設(shè)置axios中的baseUrl 與proxy端口一致

baseUrl: {
  dev: '/nuojinadm/',
  pro: '/nuojinadm/'
 }

當(dāng)有多個(gè)ip端口的接口時(shí)

devServer: {
  open: false,
  port: 8801, // 自定義修改8080端口
  // 代理跨域
  proxy: {
   '/proxy1/adm/': {
    target: 'http://192.168.0.xx:xxxx/',
    changeOrigin: true
   },
   '/proxy2/adm/': {
    target: 'http://192.168.0.xx:xxxx/',
    changeOrigin: true
   },
   '/httpsProxy3/config/': {
    target: 'https://xx.xx.com',
    secure: false, // https協(xié)議才設(shè)置
    changeOrigin: true
   }
  }
 }

2、設(shè)置axios中的baseUrl 設(shè)置為空

 baseUrl: {
  dev: '/',
  pro: '/'
 }

3、在每個(gè)request（axios）頁(yè)面中

const proxyxxx= '/xxx/xxx'

export const getBannerList = params => {
 return axios.request({
  url: `${proxyxxx}/banner/v1/banner/${params.pageSize}/${params.pageNum}`,
  params,
  method: 'get'
 })
}

以上這篇vue - vue.config.js中devServer配置方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
vue2.0使用md-edit編輯器的過(guò)程
這篇文章主要介紹了vue2.0+使用md-edit編輯器的解決方案，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2024-02-02
vue3自定義指令自動(dòng)獲取節(jié)點(diǎn)的width和height代碼示例
這篇文章主要介紹了如何使用ResizeObserver監(jiān)聽(tīng)組件的寬度和高度,并將其封裝成一個(gè)指令以便全局或局部使用,ResizeObserver可以監(jiān)聽(tīng)元素的多個(gè)尺寸屬性,如top、bottom、left等,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-11-11
Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟
最近學(xué)習(xí)在vite項(xiàng)目中配置less,本文主要介紹了Vue3+Vite項(xiàng)目使用less的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-02-02
Vue3通過(guò)hooks方式封裝節(jié)流和防抖的代碼詳解
vue3 中的 hooks 就是函數(shù)的一種寫(xiě)法,就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái),放到單獨(dú)的js文件中,或者說(shuō)是一些可以復(fù)用的公共方法/功能,本文給大家介紹了Vue3通過(guò)hooks方式封裝節(jié)流和防抖,需要的朋友可以參考下
2024-10-10
vue3.0安裝Element?ui及矢量圖使用方式
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
vue+openlayer5獲取當(dāng)前鼠標(biāo)滑過(guò)的坐標(biāo)實(shí)現(xiàn)方法
在vue項(xiàng)目中怎么獲取當(dāng)前鼠標(biāo)劃過(guò)的坐標(biāo)呢？下面通過(guò)本文給大家分享實(shí)現(xiàn)步驟，感興趣的朋友跟隨小編一起看看吧
2021-11-11
elementUi 中table表尾插入行的實(shí)例
這篇文章主要介紹了elementUi 中table表尾插入行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue實(shí)現(xiàn)動(dòng)態(tài)控制el-table表格列的展示與隱藏
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)控制el-table表格列的展示與隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12