使用碼雲Pages部署SPA單頁面

• 簡介
• • 官方文檔
  • 部署SPA
  • 初始項目結構
  • 部署SPA前的準備
  • • 1. 部署根目錄下新增 .spa 檔案
    • 2. 修改dist檔案夾中的 index.html 檔案對靜态資源的引用
  • 開始部署Pages

簡介

碼雲Pages提供靜态頁面部署。

官方文檔

碼雲Pages靜态頁面托管

部署SPA

學會部署普通碼雲Pages之後就可以嘗試部署SPA靜态頁面了。

初始項目結構

dist
  |-css
  |-js
  |-img
  favicon.ico
  index.html
public
  |-...
node_modules
  |-...
src
  |-...
package.json
README.md
           

假設碼雲倉庫内的檔案結構同上（這是 Vue 項目通常的檔案結構），其中 dist 是執行build指令後打包出來的檔案。

部署SPA前的準備

1. 部署根目錄下新增 .spa 檔案

首先需要在 根目錄 下建立一個内容為空的

.spa

檔案。

該目錄結構下的 根目錄 即為

dist

檔案夾。

<!-- 部署後的項目結構 -->
dist
  |-css
  |-js
  |-img
  favicon.ico
  index.html

  .spa（此為新增的空檔案）
...
           

碼雲的Nginx會自動識别該檔案，進而切換部署配置。

2. 修改dist檔案夾中的 index.html 檔案對靜态資源的引用

vue在打包時，會自動将引用的css、js等檔案進行壓縮。打包出來的引用路徑不能直接部署，需要修改，否則部署後會報出404錯誤。

一般是将引用路徑的絕對路徑修改為相對路徑，例如

/js/xxxx

-->

./js/xxxx

注意： head中的

link

以及body中的

script

都要記得修改。

例如：

<!-- link修改前 -->
<link href=/js/app.a47ec86c.js rel=preload as=script>
<!-- link修改後 -->
<link href=./js/app.a47ec86c.js rel=preload as=script>

<!-- script修改前 -->
<script src=/js/app.a47ec86c.js></script>
<!-- script修改後 -->
<script src=./js/app.a47ec86c.js></script>
           

将引用路徑修改完畢後，就可以使用碼雲Pages進行部署了。

開始部署Pages

1. 進入倉庫 -> 點選服務 -> Gitee Pages
2. 選擇部署分支
3. 部署目錄填寫 dist
4. 啟動
5. 完成部署