Vue3專案的打包執行

2022-10-10 18:45:11 字數 1170 閱讀 5304

執行以下這條命令對專案進行打包

npm run build
生成dist資料夾,進入dist資料夾下的index.html檔案,然後右鍵選擇open with live serve開啟一台埠號為5500的本地伺服器來開啟網頁,發現404錯誤.

這是因為index.html檔案中引入的資源路徑以專案根目錄開始,我們需要在資源路徑前面新增"/dist",此時用到了vite的配置項base.

在vite.config.ts配置檔案中,新增base配置.如圖:(如果是以vue腳手架的方式建立專案,則是新增publicpath配置項)

此時重新打包,進入專案就不會報404錯誤. 

由於打包後沒有**伺服器,如果我們本地想看打包後的頁面效果,前提是後端配置了cors解決跨域

一般由我們自己將打包好的dist資料夾的靜態資源上傳到公司伺服器的指定目錄下,可以借助filezilla軟體

ubuntu 作為 ftp 伺服器,filezilla 作為 ftp 客戶端,客戶端肯定要連線到伺服器上,開啟

站點管理器,點選:檔案->站點管理器

新建站點以後就會在「我的站點」下出

現新建的這個站點,站點的名稱可以自行修改,比如我將新的站點命名為「ubuntu」如圖

選中新建立的「ubuntu」站點,然後對站點的「常規」進行設定

vue3專案中如何配置路由

import from vue router 2 建立路由資訊物件陣列 routes 3 建立路由管理器物件並對外丟擲 const router createrouter 4 在main.js使用use router 方法,將路由管理器物件與當前vue專案相關聯 5 在專案中設定路由導航router...

vue專案的打包上線

開啟專案目錄,執行 npm run build 專案執行後,會生成乙個dist目錄,這個目錄就是上線的內容,將這個檔案給後台,放到伺服器上即可 1.後台的根目錄下直接放即可 2.如果放在後台的乙個資料夾下,例如放在後台的project檔案下,配置如下 config index.js檔案裡面找到bui...

前端Vue專案的執行

安裝成功以後,我們可以通過npm v命令,檢視安裝的版本。npm v然後我們輸入npm config set registry 映象位址,配置我們的npm映象。npm config set registry http 映象位址 npm config ls 命令可以檢視我們配置的npm映象位址 npm...