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