Vue專案中對index.html中BASE_URL的設定方式

2022-06-14 22:00:18

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專案url中的＜%= BASE_URL %＞

vue-cli 建立的一個專案中執行命令 vue inspect > output.js 將 vue-cli 中 webpack 的設定資訊匯出到 output.js 檔案，會有一段程式碼：

 new DefinePlugin(
     {
       'process.env': {
         NODE_ENV: '"development"',
         BASE_URL: '"/"'
       }
     }
   ),

在 webpack 中全域性宣告了 BASE_URL 這個變數為專案根目錄。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

Vue專案中對index.html中BASE_URL的設定方式

目錄

Vue專案對index.html中BASE_URL的設定

問題

解決

Vue專案url中的＜%= BASE_URL %＞

熱門文章