欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli3.0項目打包后如何修改訪問后端地址

 更新時間:2022年03月29日 15:13:56   作者:sqwu  
這篇文章主要介紹了vue-cli3.0項目打包后如何修改訪問后端地址,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

打包修改訪問后端地址

問題

原本是將訪問后臺的地址寫在代碼里面,但是這樣的話打包之后就不能修改了,只能在代碼里面修改,然后重新打包

解決

在vue-cli3.0之前的版本,項目目錄有static不會被打包,而在vue-cli3.0項目目錄沒有static文件夾,但是有public文件夾是不會被打包(因此有些沒有npm的插件或者包應(yīng)該放在public目錄下),所以在public目錄下創(chuàng)建一個js文件,命名為config.js

在里面添加代碼, 定義BASE_URL為要訪問后臺接口的地址

在index.html里面添加代碼該文件

<script type="text/javascript" src="./config.js"></script>

最后在需要的地方引用它

window.global_config.BASE_URL

這樣配置完了無論是在打包后還是在開發(fā)中都可以正常訪問后臺

執(zhí)行命令打包項目

npm run build

在打包好的dist,目錄下的config.js文件里面就可以改后端接口地址啦~~~~ 

項目打包后直接修改ip地址

最近的項目遇到了私有化部署,ip地址不是唯一的,如果每次都修改完ip地址再打包再重新部署,實在是太繁瑣了,身為程序員怎么能干這么累的活  ̄へ ̄ ,這篇文章就是記錄一下如何把ip地址變成可配置的,不用再重新構(gòu)建代碼就能重新生效。

實現(xiàn)方案

經(jīng)過一番調(diào)研,最終確定了3個方案:

1. 方案一

在與src同級的static文件夾或者是public文件夾(element-admin模板)下新建config.js文件,在里面配置生產(chǎn)環(huán)境地址,在index.html引入。 方法可行,但是可能會被惡意修改地址,不安全。不過一般的項目用這個就行。

(實測可行,打包后直接修改config.js里的地址,刷新頁面即可生效)

第一步: 我用的element-admin的模板,所以我在public里生成一個config.js文件

const VUE_APP_URL = {
? ? baseUrl: 'http://192.168.1.19:8080',
}

第二步: 在index.html直接引入config.js文件(加在 body 標(biāo)簽上方)

<script src="./config.js"></script>

第三步: 在封裝請求的request.js頁面賦值

let baseURL
if (process.env.NODE_ENV === 'production') {
? baseURL = VUE_APP_URL.baseUrl
? sessionStorage.setItem('c_baseUrl',VUE_APP_URL.baseUrl) //如果其他地方能用到就存sessionStorage
} else {
? baseURL = process.env.VUE_APP_BASE_API
}
const service = axios.create({
? baseURL: baseURL,
? timeout: 50000
})

2. 方案二

使用網(wǎng)上的插件generate-asset-webpack-plugin,通過一系列配置生成一堆靜態(tài)文件。這種方法是用請求json文件獲取地址的方法。安全有一定保證,不過屬實麻煩。

(我只看了實現(xiàn)原理,沒有耐心試驗管不管用( ̄_, ̄ ),感興趣可以自行了解)

3. 方案三

在public新建的是json文件,通過請求json文件獲取地址。

(上面兩種方案的結(jié)合版,理論可以,不過這種也沒試驗,不確定好不好用)

{
?? ?'baseUrl': 'http://192.168.1.19:8080'
}
import axios from 'axios'
let baseURL
if(process.env.NODE_ENV=='production'){
? ? http.get('./config.json').then((res)=>{
? ? ? ? sessionStorage.setItem('baseURL',res.data.baseURL)
? ? ? ? baseURL=res.data.baseURL
? ? })
}else{
? ? baseURL = process.env.VUE_APP_BASE_API
}
const service = axios.create({
? baseURL: baseURL,
? timeout: 50000
})

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • vue單向數(shù)據(jù)流的深入講解

    vue單向數(shù)據(jù)流的深入講解

    單向數(shù)據(jù)流方式使用一個上傳數(shù)據(jù)流和一個下傳數(shù)據(jù)流進行雙向數(shù)據(jù)通信,兩個數(shù)據(jù)流之間相互獨立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • vue3?hook自動導(dǎo)入原理及使用

    vue3?hook自動導(dǎo)入原理及使用

    最近學(xué)習(xí)了hooks,特地寫一篇文章加深一下印象,下面這篇文章主要給大家介紹了關(guān)于vue3?hook自動導(dǎo)入原理及使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue實現(xiàn)簡易選項卡功能

    vue實現(xiàn)簡易選項卡功能

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡易選項卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • vue 自動生成swagger接口請求文件的方法

    vue 自動生成swagger接口請求文件的方法

    這篇文章主要介紹了vue 自動生成swagger接口請求文件的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-01-01
  • Vue使用NProgress的操作過程解析

    Vue使用NProgress的操作過程解析

    這篇文章主要介紹了Vue使用NProgress的操作過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-10-10
  • 淺談vue限制文本框輸入數(shù)字的正確姿勢

    淺談vue限制文本框輸入數(shù)字的正確姿勢

    這篇文章主要介紹了vue限制文本框輸入數(shù)字的正確姿勢,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • Vue組件化開發(fā)之通用型彈出框的實現(xiàn)

    Vue組件化開發(fā)之通用型彈出框的實現(xiàn)

    這篇文章主要介紹了Vue組件化開發(fā)之通用型彈出框的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • vant IndexBar實現(xiàn)的城市列表的示例代碼

    vant IndexBar實現(xiàn)的城市列表的示例代碼

    這篇文章主要介紹了vant IndexBar實現(xiàn)的城市列表的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • Vite配置路徑別名的簡單實現(xiàn)方法

    Vite配置路徑別名的簡單實現(xiàn)方法

    Vite項目中我們可以手動將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡單實現(xiàn)方法,需要的朋友可以參考下
    2023-04-04
  • 解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題

    解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題

    這篇文章主要介紹了解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03

最新評論