vue項目打包後部署伺服器存取頁面

當我們完成了 Vue 專案的開發之後，需要將其打包並部署到伺服器上，以便我們可以在網路環境下存取專案頁面。本文將簡要介紹如何打包和部署 Vue 項目，並提供一些常見問題的解決方案，方便讀者在將 Vue 項目部署到伺服器時順利完成。

一、vue專案打包

在開始打包之前，需要安裝好 Node.js 和 npm。如果您已經完成了這些步驟，那麼可以進入到Vue 專案的根目錄，並依序執行以下命令：

npm run build

這個指令會在專案的根目錄下產生一個名字為「dist」的資料夾。在 dist 目錄下，會有一個 “index.html” 檔案和一個「static」資料夾，它們是我們需要上傳到伺服器的核心檔案。

二、部署至伺服器

1. 上傳至伺服器

#您可以使用FTP 工具將dist 資料夾上傳至伺服器上，或使用SSH 指令將檔案傳輸到伺服器上。這裡以使用 FTP 為例進行說明。

在上傳檔案之前，需要確保您已經在伺服器上建立好了您的網站根目錄。將 dist 資料夾上傳至您的網站根目錄下，然後確保 index.html 檔案和 static 資料夾均在網站根目錄下。

2. 設定伺服器

在將 Vue 專案部署到伺服器之前，您需要確保伺服器上已經安裝了 Node.js 和 npm。

使用SSH 用戶端登入伺服器，進入到網站根目錄下，執行下列指令：

npm install -g http-server

安裝完畢後，執行下列指令啟動伺服器：

http-server -p 8080

這個指令會在本機的8080 連接埠上啟動一個伺服器。您可以透過 http://您的伺服器IP位址:8080 造訪您的網站。

3. 解決常見問題

在將 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中文網其他相關文章！