成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue項(xiàng)目打包后動(dòng)態(tài)獲取自定義變量

Integ / 1393人閱讀

摘要：若不足之處，歡迎大家指出，共勉。如果覺(jué)得不錯(cuò)，記得點(diǎn)贊，謝謝大家

1 前言 1.1 業(yè)務(wù)場(chǎng)景

一般使用 Vue 項(xiàng)目連接后端請(qǐng)求，使用的 axios

import axios from "axios"

export const CMSAPI = axios.create({
  baseURL: "http://localhost:8080",
  timeout: 30000,
});

axios 中的 baseURL 一般是訪問(wèn)地址

Vue 項(xiàng)目打包后，如果我們需要修改這個(gè) baseURL 就需要修改代碼重新 build

這樣就比較麻煩了

有沒(méi)有什么辦法可以在Vue項(xiàng)目打包后再自定義變量呢？

2 實(shí)現(xiàn)原理 2.1 文件

目前使用新版 @vue/cli 創(chuàng)建的項(xiàng)目目錄如上

我們發(fā)現(xiàn)這個(gè)圖標(biāo)文件 favicon.ico 在打包文件中會(huì)多帶帶存在

類似，我們?cè)谶@個(gè)文件夾中新建一個(gè) index.js 文件

2.2 代碼

index.js 文件中，我們直接定義一個(gè)變量

//  index.js
const apiURL = "http://localhost:8080"
//  index.html

//  然后使用window對(duì)象
window.apiURL = apiURL
// axios中引用
import axios from "axios"

export const CMSAPI = axios.create({
  baseURL: window.apiURL,
  timeout: 30000,
});
2.3 打包

npm run build 后，會(huì)發(fā)現(xiàn)根目錄中有我們定義的 index.js

這樣我們就可以直接修改 index.js 中變量的值就可以啦

3 后記

感謝支持。若不足之處，歡迎大家指出，共勉。

如果覺(jué)得不錯(cuò)，記得 點(diǎn)贊，謝謝大家

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110236.html

相關(guān)文章

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    Tecode 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    APICloud 評(píng)論0 收藏0

  • vue開(kāi)發(fā)看這篇文章就夠了

    摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁(yè)面中的元素是更新之前的鉤子函數(shù)說(shuō)明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于的操作。鉤子函數(shù)說(shuō)明實(shí)例銷毀 Vue -漸進(jìn)式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶界面(UI)的漸進(jìn)式JavaScript框架 庫(kù)和框架的區(qū)別 我們所說(shuō)的前端框架與庫(kù)的區(qū)別？ Library 庫(kù)，本質(zhì)上是一...

    fsmStudy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<