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)文章
這篇文章主要介紹了vue?父子組件共用mixins的注意點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
35個(gè)最好用的Vue開(kāi)源庫(kù)(史上最全)
無(wú)論是開(kāi)發(fā)新手還是經(jīng)驗(yàn)豐富的老手，我們都喜歡開(kāi)源軟件包。本文主要介紹了35個(gè)最好用的Vue開(kāi)源庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析
這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫(kù)可以實(shí)現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下2024-10-10
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3中ref和reactive函數(shù)的使用教程，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-07-07
這篇文章給大家講述了vue中關(guān)閉eslint的方法內(nèi)容，有需要的讀者們可以參考學(xué)習(xí)下。2018-08-08
基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目
這篇文章主要為大家詳細(xì)介紹了基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對(duì)問(wèn)題
今天小編就為大家分享一篇解決vue項(xiàng)目刷新后,導(dǎo)航菜單高亮顯示的位置不對(duì)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue項(xiàng)目使用typescript創(chuàng)建抽象類(lèi)及其使用方式
這篇文章主要介紹了vue項(xiàng)目使用typescript創(chuàng)建抽象類(lèi)及其使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue?Hook?封裝通用型表格的詳細(xì)過(guò)程
這篇文章主要介紹了Vue?Hook?封裝通用型表格,設(shè)計(jì)通用型表格組件首先,需要設(shè)計(jì)一個(gè)基礎(chǔ)的表格組件,它接受列配置、數(shù)據(jù)和分頁(yè)信息等參數(shù),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08