vue改啟動路徑不生效怎麼解決
- PHPz原創
- 2023-04-13 10:44:101209瀏覽
近期在使用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中文網其他相關文章！