溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下Vue項目怎么配置index.html中的BASE_URL的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
有時候后端配置資源的默認訪問路徑的時候，可能會與前端打包時配置的默認根路徑有所差異
比如：后端要訪問靜態資源的根路徑為/static，而一般情況下，我們項目的vue.config.js中對BAES_URL的配置是/，或者不做配置，因為它默認的值也是/
這個路徑決定了我們的前端項目打包后獲取靜態資源的默認的根路徑（不顯示在代碼中），同時，這個路徑也在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>
那么，我們應該如何去修改這個BAE_URL的值呢？
通過 vue-cli3 官方文檔的查閱，發現：
所以，顯而易見，如果想修改 BASE_URL，
Vue CLI 3.3 之前的版本，配置：baseURl: '/static'
Vue CLI 3.3 之后（包括3.3）的版本，配置：publicPath: '/static'
因為這個值在開發環境下同樣生效，所以說這么一改打包后是沒問題了，但自己的項目運行起來卻會報錯，官方也給出了方案。很簡單，只需要判斷一下當前環境是生產環境還是開發環境，再應用不同的路徑就可以了。如下：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/static/'
: '/'
}注意：
還需要注意的一個問題是，當我們修改了publicPath 之后，如果我們對路由的配置是像下面這樣：
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap.concat(asyncRouterMap)
})可以看到路由的基礎路徑跟 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-cli 創建的一個項目中執行命令 vue inspect > output.js 將 vue-cli 中 webpack 的配置信息導出到 output.js 文件，會有一段代碼：
new DefinePlugin(
{
'process.env': {
NODE_ENV: '"development"',
BASE_URL: '"/"'
}
}
),在 webpack 中全局聲明了 BASE_URL 這個變量為項目根目錄。
以上就是“Vue項目怎么配置index.html中的BASE_URL”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
