Vue3+TS+Vite開發技巧：如何進行專案部署與上線

Vue3 TS Vite開發技巧：如何進行專案部署和上線

一、專案建置
在開始之前，我們先確保已經安裝好了Node. js和Vue CLI，然後執行以下指令來建立一個全新的Vue3 TS Vite專案：

vue create project-name

接著，選擇"Manually select features"，然後勾選"TypeScript"，最後按下回車鍵進行安裝。

二、開發環境設定

1. 修改Vite設定檔
   在專案根目錄下找到vite.config.ts文件，並修改以下內容：

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     base: './',
   })

   這樣設定之後，專案將會以目前路徑作為基礎路徑進行打包。

2. 配置部署目錄
   開啟src/env/production.ts文件，並將publicPath修改為你要部署專案的目錄，例如：

   export default {
     publicPath: '/your-project-name/',
   }

   這樣設定之後，打包後的檔案將會自動放在/your-project-name/目錄下。

三、專案建置與打包

1. 建置專案
   執行下列指令，將專案建置為可部署的靜態檔案：

   npm run build

   建置完成後，在專案根目錄下會產生一個dist資料夾，裡面存放著打包後的靜態檔案。

2. 本地測試
   可以透過以下命令在本地啟動一個伺服器來測試打包後的項目：

   npm install -g http-server
   cd dist
   http-server

   然後在瀏覽器中開啟http ://localhost:8080即可查看專案效果。

四、部署到伺服器

1. 將打包後的檔案上傳到伺服器上
   將dist資料夾中的所有檔案上傳到你的伺服器上，可以使用FTP工具或其他方法進行上傳。確保檔案上傳到了正確的目錄下。

2. 設定伺服器
   在你的伺服器上，需要設定一個nginx（或其他類似的伺服器軟體）來處理靜態檔案的請求。假設你使用的是nginx，則可以在設定檔中加入以下內容：

   server {
     listen 80;
     server_name your-domain.com;
   
     location / {
    root /path/to/your-project/;
    try_files $uri $uri/ =404;
     }
   }

   注意將your-domain.com替換為你的域名，/path/to/your-project/替換為你上傳專案的目錄。

3. 啟動伺服器
   重啟nginx伺服器，讓設定生效。
4. 檢查部署情況
   打開你的網域或伺服器的IP位址，如果一切正常，你應該可以看到你的專案在瀏覽器中運作。

總結
透過上述幾個步驟，我們可以將基於Vue3 TS Vite開發的專案進行部署和上線，使其在伺服器上運行。希望這篇文章能對你有所幫助，祝你的專案順利上線！

以上就是Vue3 TS Vite開發技巧：如何進行專案部署和上線的內容。

（以上文章僅供參考，具體操作還需依實際情況調整）

以上是Vue3+TS+Vite開發技巧：如何進行專案部署與上線的詳細內容。更多資訊請關注PHP中文網其他相關文章！