Vue打包之後,預設的存取路徑是/index.html,如果需要修改存取路徑,可以依照下列步驟來實現。
在Vue專案建立後,可以在config目錄下看到index.js文件,開啟該檔案。
在檔案中找到build.assetsPublicPath,該屬性表示靜態資源的公共路徑,即產生的index.html檔案中引用靜態資源的路徑。
預設值為'/',表示靜態資源的路徑是相對於index.html檔案所在的根目錄。
如果需要修改存取路徑為'/myApp/',則需要將build.assetsPublicPath的值設為'/myApp/'。
assetsPublicPath: '/myApp/'
在同樣的檔案中,找到build.assetsSubDirectory,該屬性表示靜態資源的存放目錄。
預設值為'static',表示靜態資源存放在專案根目錄下的static目錄中。
如果需要將靜態資源存放在專案根目錄下的myApp/static目錄下,則需要將build.assetsSubDirectory的值設定為'myApp/static'。
assetsSubDirectory: 'myApp/static'
如果使用了router模式進行頁面路由,還需要修改router模式。
在router/index.js檔案中,找到建立Router實例的程式碼:
const router = new Router({ mode: 'history', routes: [...] })
修改mode為'hash',表示使用hash模式進行頁面路由。
const router = new Router({ mode: 'hash', routes: [...] })
修改好以上設定後,需要重新執行打包指令進行打包。
執行打包指令:
npm run build
等待打包完成後,可以將產生的檔案部署到伺服器中,存取路徑即為設定的路徑。
以上是vue怎麼打包修改存取頁面路徑的詳細內容。更多資訊請關注PHP中文網其他相關文章!