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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: