Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式
Vue項(xiàng)目對(duì)index.html中BASE_URL的配置
問(wèn)題
有時(shí)候后端配置資源的默認(rèn)訪問(wèn)路徑的時(shí)候，可能會(huì)與前端打包時(shí)配置的默認(rèn)根路徑有所差異
比如：后端要訪問(wèn)靜態(tài)資源的根路徑為/static，而一般情況下，我們項(xiàng)目的vue.config.js中對(duì)BAES_URL的配置是/，或者不做配置，因?yàn)樗J(rèn)的值也是/
這個(gè)路徑?jīng)Q定了我們的前端項(xiàng)目打包后獲取靜態(tài)資源的默認(rèn)的根路徑（不顯示在代碼中），同時(shí)，這個(gè)路徑也在public/index.html中有明顯的引用，大多時(shí)候都會(huì)看到如下的代碼：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>logo.png" rel="external nofollow" >
<title>xxxx</title>
</head>
<body>
<div>.......</div>
</body>
</html>那么，我們應(yīng)該如何去修改這個(gè)BAE_URL的值呢？
解決
通過(guò) vue-cli3 官方文檔的查閱，發(fā)現(xiàn)：
所以，顯而易見(jiàn)，如果想修改 BASE_URL，
Vue CLI 3.3 之前的版本，配置：baseURl: '/static'
Vue CLI 3.3 之后（包括3.3）的版本，配置：publicPath: '/static'
因?yàn)檫@個(gè)值在開(kāi)發(fā)環(huán)境下同樣生效，所以說(shuō)這么一改打包后是沒(méi)問(wèn)題了，但自己的項(xiàng)目運(yùn)行起來(lái)卻會(huì)報(bào)錯(cuò)，官方也給出了方案。很簡(jiǎn)單，只需要判斷一下當(dāng)前環(huán)境是生產(chǎn)環(huán)境還是開(kāi)發(fā)環(huán)境，再應(yīng)用不同的路徑就可以了。如下：
module.exports = {
? publicPath: process.env.NODE_ENV === 'production'
? ? ? '/static/'
? ? : '/'
}注意：
還需要注意的一個(gè)問(wèn)題是，當(dāng)我們修改了publicPath 之后，如果我們對(duì)路由的配置是像下面這樣：
export default new Router({
? mode: 'history',
? base: process.env.BASE_URL,
? scrollBehavior: () => ({ y: 0 }),
? routes: constantRouterMap.concat(asyncRouterMap)
})可以看到路由的基礎(chǔ)路徑跟 BASE_URL 即 publicPath 是相同的。
如果保持原來(lái)的配置，那么所有的路由都會(huì)帶上多余的前綴，如:/static/home
修改方式也很簡(jiǎn)單，如下：
Vue.use(Router)
export default new Router({
? mode: 'history',
? // base: process.env.BASE_URL,
? base: '/',
? scrollBehavior: () => ({ y: 0 }),
? routes: constantRouterMap.concat(asyncRouterMap)
})將base屬性重置為/即可
Vue項(xiàng)目url中的＜%= BASE_URL %＞
vue-cli 創(chuàng)建的一個(gè)項(xiàng)目中執(zhí)行命令 vue inspect > output.js 將 vue-cli 中 webpack 的配置信息導(dǎo)出到 output.js 文件，會(huì)有一段代碼：
?new DefinePlugin(
? ? ?{
? ? ? ?'process.env': {
? ? ? ? ?NODE_ENV: '"development"',
? ? ? ? ?BASE_URL: '"/"'
? ? ? ?}
? ? ?}
? ?),在 webpack 中全局聲明了 BASE_URL 這個(gè)變量為項(xiàng)目根目錄。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue-Split實(shí)現(xiàn)面板分割，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程
最近接觸學(xué)習(xí)Vue.js框架結(jié)合Element-ui組件開(kāi)發(fā)項(xiàng)目。由于最近需要實(shí)現(xiàn)國(guó)際化功能，所以下面這篇文章主要介紹了vue項(xiàng)目國(guó)際化vue-i18n的使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-03-03
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2017-10-10
使用vuex解決刷新頁(yè)面state數(shù)據(jù)消失的問(wèn)題記錄
這篇文章主要介紹了使用vuex解決刷新頁(yè)面state數(shù)據(jù)消失的問(wèn)題記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
使用D3.js+Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱形圖
這篇文章主要介紹了使用D3.js+Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱形圖,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
vue項(xiàng)目中使用vue-layer彈框插件的方法
這篇文章主要介紹了vue項(xiàng)目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue路由history模式頁(yè)面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁(yè)面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，本文通過(guò)實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11