vue改啟動路徑不生效怎麼解決

PHPz
發布: 2023-04-13 10:45:51
原創
1247 人瀏覽過

近期在使用Vue框架進行開發時,遇到了一個問題,即修改Vue專案的啟動路徑後並沒有生效,一直還是預設存取的localhost:8080而非自訂的路徑。經過一番探究和實驗,我找到了解決此問題的方法,並寫下了這篇文章,希望能幫助更多遇到相同問題的開發者。

首先,我們來了解Vue專案的預設啟動路徑。在Vue專案中,我們透過使用vue-cli腳手架產生的基礎模板,產生的專案結構如下:

projectName
│   package-lock.json
│   package.json
│   README.md
│
├───public
│       favicon.ico
│       index.html
│
└───src
        App.vue
        main.js
登入後複製

其中,public資料夾下的index.html是Vue專案的入口文件,我們可以在其中使用<%= BASE_URL %>變數來表示專案的根路徑。 Vue的預設模式是基於/路徑進行啟動,也就是localhost:8080/。當我嘗試在​​vue.config.js檔案中修改此預設路徑後,卻一直沒有生效。

依照Vue官方文件上的介紹,在vue.config.js檔案中應該要加入以下程式碼:

module.exports = {
    publicPath: '/newpath/'
}
登入後複製

這樣便可以將專案的啟動路徑修改為localhost:8080/newpath/。但是,經過實驗,這種方法在我們的專案中並沒有生效,原因是我們的專案使用了二級網域進行訪問,例如http://myproject.example.com,而非http://example.com/myproject的路徑存取方式。

因此,我們需要在public資料夾下的index.html中手動新增專案的根路徑。找到index.html檔案中的<head>標籤,我們可以加入以下程式碼:

<base href="/newpath/">
登入後複製

這裡的/newpath/就是我們自訂的啟動路徑。這樣,無論我們如何修改vue.config.js檔案中的publicPath,都能夠正確地存取到專案。同時,我們也可以把路徑改為/,這樣我們就能夠透過二級網域的方式來存取專案。

總之,無論是在何種方式下,修改Vue專案的啟動路徑都需要我們手動設置,而非僅僅在vue.config.js檔案中做一個設定。在實際專案中,配置正確的啟動路徑將會是非常重要的一步。

以上是vue改啟動路徑不生效怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板