當我們完成了 Vue 專案的開發之後，需要將其打包並部署到伺服器上，以便我們可以在網路環境下存取專案頁面。本文將簡要介紹如何打包和部署 Vue 項目，並提供一些常見問題的解決方案，方便讀者在將 Vue 項目部署到伺服器時順利完成。
一、vue專案打包
在開始打包之前，需要安裝好 Node.js 和 npm。如果您已經完成了這些步驟，那麼可以進入到Vue 專案的根目錄，並依序執行以下命令：
npm run build
這個指令會在專案的根目錄下產生一個名字為「dist」的資料夾。在 dist 目錄下，會有一個 “index.html” 檔案和一個「static」資料夾，它們是我們需要上傳到伺服器的核心檔案。
二、部署至伺服器
#您可以使用FTP 工具將dist 資料夾上傳至伺服器上，或使用SSH 指令將檔案傳輸到伺服器上。這裡以使用 FTP 為例進行說明。
在上傳檔案之前，需要確保您已經在伺服器上建立好了您的網站根目錄。將 dist 資料夾上傳至您的網站根目錄下，然後確保 index.html 檔案和 static 資料夾均在網站根目錄下。
在將 Vue 專案部署到伺服器之前，您需要確保伺服器上已經安裝了 Node.js 和 npm。
使用SSH 用戶端登入伺服器，進入到網站根目錄下，執行下列指令：
npm install -g http-server
安裝完畢後，執行下列指令啟動伺服器：
http-server -p 8080
這個指令會在本機的8080 連接埠上啟動一個伺服器。您可以透過 http://您的伺服器IP位址:8080 造訪您的網站。
在將 Vue 專案部署到伺服器上時，可能會遇到一些常見問題。以下是一些可能發生的問題及其解決方案:
1) 訪問時出現404 錯誤
如果您在訪問時出現404 錯誤，可能是因為您的伺服器沒有正確配置好路由。您可以嘗試使用Hash 模式進行路由，修改Vue 專案的設定檔：
在src/router/index.js 檔案中修改：
const router = new VueRouter({
mode: 'hash',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}]
})
修改完畢後，重新打包並部署到伺服器上，然後重新造訪。
2) 靜態檔案載入失敗
如果您的靜態檔案載入失敗，可能是因為您的伺服器沒有正確配置 MIME 類型。在Nginx 設定檔中加入以下內容即可解決這個問題：
location / {
add_header Content-Type "text/html";
add_header X-Content-Type-Options nosniff;
}
location ~* .(png|jpg|jpeg|gif|css|js|ico)$ {
add_header Content-Type "image/png";
add_header X-Content -Type-Options nosniff;
}
3) 伺服器資料夾存取權問題
如果您在上傳Vue 專案到伺服器時出現403 錯誤，可能是因為您的伺服器沒有正確的資料夾存取權限。在執行chmod 指令更改資料夾權限即可解決這個問題：
chmod 755 資料夾名稱
四、結束語
本文簡要介紹如何打包和部署Vue 項目，並解決了一些可能出現的問題。希望本文對您在將 Vue 專案部署到伺服器上時能夠帶來一些幫助。在具體操作過程中，還需要根據伺服器的作業系統等情況進行具體的調整。祝您順利完成 Vue 專案的部署。
以上是vue項目打包後部署伺服器存取頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
