近期在使用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中文網其他相關文章!