首頁 > web前端 > 前端問答 > vue怎麼打包修改存取頁面路徑

vue怎麼打包修改存取頁面路徑

PHPz
發布: 2023-04-12 11:45:57
原創
3475 人瀏覽過

Vue打包之後,預設的存取路徑是/index.html,如果需要修改存取路徑,可以依照下列步驟來實現。

  1. 開啟config/index.js檔案

在Vue專案建立後,可以在config目錄下看到index.js文件,開啟該檔案。

  1. 修改build.assetsPublicPath

在檔案中找到build.assetsPublicPath,該屬性表示靜態資源的公共路徑,即產生的index.html檔案中引用靜態資源的路徑。

預設值為'/',表示靜態資源的路徑是相對於index.html檔案所在的根目錄。

如果需要修改存取路徑為'/myApp/',則需要將build.assetsPublicPath的值設為'/myApp/'。

assetsPublicPath: '/myApp/'
登入後複製
  1. 修改build.assetsSubDirectory

在同樣的檔案中,找到build.assetsSubDirectory,該屬性表示靜態資源的存放目錄。

預設值為'static',表示靜態資源存放在專案根目錄下的static目錄中。

如果需要將靜態資源存放在專案根目錄下的myApp/static目錄下,則需要將build.assetsSubDirectory的值設定為'myApp/static'。

assetsSubDirectory: 'myApp/static'
登入後複製
  1. 修改router模式

如果使用了router模式進行頁面路由,還需要修改router模式。

在router/index.js檔案中,找到建立Router實例的程式碼:

const router = new Router({
  mode: 'history',
  routes: [...]
})
登入後複製

修改mode為'hash',表示使用hash模式進行頁面路由。

const router = new Router({
  mode: 'hash',
  routes: [...]
})
登入後複製
  1. 執行打包指令

修改好以上設定後,需要重新執行打包指令進行打包。

執行打包指令:

npm run build
登入後複製

等待打包完成後,可以將產生的檔案部署到伺服器中,存取路徑即為設定的路徑。

以上是vue怎麼打包修改存取頁面路徑的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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