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)文章
vant IndexBar實現(xiàn)的城市列表的示例代碼
這篇文章主要介紹了vant IndexBar實現(xiàn)的城市列表的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題
這篇文章主要介紹了解決vue-cli-service不是內(nèi)部或外部命令也不是可運行的程序或批處理文件的報錯問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03