H5 是 HTML 5 的縮寫，也代表新瀏覽器技術和標準，例如一些先進瀏覽所支援的一些 HTML 5 標準 APIs
#什麼是 SPA
單頁 Web 應用（single page web application，SPA），就是隻有一張 Web 頁面的應用。單頁應用程式 (SPA) 是載入單個 HTML 頁面並在使用者與應用程式互動時動態更新該頁面的Web應用程式。瀏覽器一開始會載入必需的 HTML、CSS 和 JavaScript，所有的操作都在這張頁面上完成，都由 JavaScript 來控制。因此，對單頁應用來說模組化的開發和設計顯得相當重要。
說明參考：
#簡介
Plus 小屏網頁客戶端（以下簡稱 Plus SPA）是使用 Vue.js 及 ES+ 等現代 Web 技術進行構建編寫的 Web 單頁應用。其純前端的程式碼，允許將 Plus SPA 分發到網路上的各個地方，甚至你可以進行裝置嵌入本地執行，只要你有一個可以渲染 JS + HTML + CSS 的應用即可。
#下載程式
在前面的教程中，我們在 CentOS 7.4 的伺服器中已經安裝可 Git 軟體，如果你是直接跳過來看 SPA 安裝教程的，請在 CentOS 中執行下面的命令安裝，如果你不是 CentOS 系統，請自行從 Git 官網安裝，命令如下：
yum install -y git
我們的 SPA 程式碼存放在slimkit/plus-small-screen-client」。
現在，我們進入 CentOS 中，然後按照之前安裝 Plus 的慣例，我們將程式程式碼存放在 /usr/local/src目錄中，所以我們執行 cd /usr/local/src 即可進入該目錄，然後我們執行下面的命令：
git clone https://github.com/slimkit/plus-small-scre... spa && cd spa
執行完成你，你可以執行 pwd 你可以看到你當前所處的位置為 /usr/local/src/spa，這就是我們的程式碼位置了。
#安裝 Node.js
我們開啟 Node.js 官網下載頁面 預設會選擇 LTS 版本，目前我這裡最新的是 8.12.0 版本，我們在頁面找到 ·Linux Binaries (x86/x64)· 這一行，我這裡系統是 65 Bit 所以我點選這一行的 64-bit 按鈕，你更具你係統選擇。如果你不清楚，請看下圖：
通過上圖可知，我這裡需要 64-bit 右鍵後選擇「複製連結地址」得到 https://nodejs.org/dist/v8.12.0/node-v8.12... 這樣的地址。我們現在回到伺服器家目錄（執行 cd ~）然後使用下面的命令進行下載：
curl -L https://nodejs.org/dist/v8.12.0/node-v8.12... > node-v8.12.0-linux-x64.tar.xz1
執行完成後，我們輸入 ls -al 命令，你會看到有一個 node-v8.12.0-linux-x64.tar.xz 的歸檔檔案。
現在我們下載解壓工具對歸檔進行解壓：
yum install -y xz tar
執行完成後，我們開始解壓吧！我們先執行 xz -d node-v8.12.0-linux-x64.tar.xz 命令，然後之前的 .xz 歸檔消失了，會多處一個 node-v8.12.0-linux-x64.tar 的歸檔檔案，我們繼續執行 tar -xvf node-v8.12.0-linux-x64.tar 就會出現一個 node-v8.12.0-linux-x64 的資料夾，這就是我們的 Node.js 程式了！
接下來，我們為了統一管理，我們將 Node 軟體放到指定位置（並不是必須，而是推薦），之前我們的軟體都放在 /usr/local 下，所以這次也一樣，我們執行：
mv -f ~/node-v8.12.0-linux-x64 /usr/local/node
然後為了方便我們全域性使用 node 命令進行呼叫，我們需要將 /usr/local/node/bin 加入到環境變數，素以我們使用 Vim 開啟 /etc/profile 檔案，在結尾追加一行：
export PATH=$PATH:/usr/local/node/bin/
加入後，我們執行 source /etc/profile 使其生效，最後我們輸入 node -v 你會看到下面的資訊，表示已經成功：
v8.12.0
#安裝 Yarn 依賴管理工具
我們並不推薦使用 NPM 進行依賴管理，因為開發人員在開發過程中也是重度依賴 Yarn 進行依賴管理，我們並不知道開發人員會搞出什麼么蛾子，所以我們和開發人員一樣使用 Yarn 吧！常規安裝 Yarn 較為麻煩，但是我們可以利用 NPM 讓媳婦把小三抱進家裡☺️：
npm -g i yarn1
接下來，我們執行 yarn --version 就會輸出 Yarn 的版本資訊，說明我們已經安裝完成了。
#配置 Plus SPA
好了，工具和環境都安裝完成了，我們輸入 cd /usr/local/src/spa 回到 Plus SPA 的程式碼目錄，執行下面的命令，建立我們所需要的 .env 檔案：
cat .env.example > .env1
執行完成後，我們使用 Vim 工具進行編輯該檔案，執行 vim .env 命令，編輯的內容如下：
BASE_URL=/ # 我們假設你部署在一個域名下，所以預設 /, 例如你部署在子目錄下，請設定子目錄，必須以 / 結尾！
GENERATE_CSS_MAP=true
VUE_APP_ENABLE_SERVICE_WORKER=false
VUE_APP_API_HOST=http://127.0.0.1 # 我們暫時只配置這裡，將內容修改為我們伺服器的 IP 地址（上一章我們使用 NPM + FPM 釋出了站點的）
VUE_APP_API_VERSION=v2
VUE_APP_NAME="Plus (ThinkSNS+)"
VUE_APP_KEYWORDS="plus,web,spa,sns,think,thinksns,app,social,powerful,vue"
VUE_APP_DESCRIPTION=", built with Vue.js."
VUE_APP_ROUTER_MODE=hash
VUE_APP_THEME=src/console/theme.js
VUE_APP_EASEMOB_APP_KEY=#
VUE_APP_EASEMOB_API_URL=http://a1.easemob.com
VUE_APP_EASEMOB_ISDEBUG=false
VUE_APP_LBS_GAODE_KEY=
各個引數描述詳情清檢視 slimkit/plus-small-screen-client#readme的描述
#安裝依賴
我們使用 cd /usr/local/src/spa 進入 Plus SPA 程式目錄，這裡我們使用 Yarn 工具進行程式的依賴安裝：
yarn install
這個過程會從國外的伺服器上下載依賴包的後設資料和依賴包資料，所以速度會很慢，因為 vue-cli 工具本身的依賴原因，過程中會出現一些 warning 開頭的警告，這不是錯誤，所以無需理會！
#子目錄釋出 SPA
子目錄釋出 H5 有一個不好的地方，就是我們只能使用 hash 模式理由，但是我們可以規避跨域請求的安全限制問題，當然，想使用 history 需要對 Nginx 做特殊處理，這裡教程中並不會給出例子，因為我們後面有獨立部署的章節，所以我們先來看如何子目錄安裝吧。
首先我們擬定我們希望放置在 Plus 程式域名下的 **spa** 目錄下，所以，我們重新開啟 Plus SPA 的 .env 檔案，然後將下面的 BASE_URL 修改為 /spa/ 這個值，修改後應該是這樣的：
BASE_URL=/spa/
修改成功後，我們使用 cd /usr/local/src/spa 命令進入 Plus SPA 程式目錄，然後執行蝦米啊的命令進行打包編譯：
yarn build
這個過程也是比較慢的，速度取決於你的磁碟速度。執行成功後會有類似下面的輸出：
接下來我們執行下面的命令，將其編譯好的輸出軟鏈到我們的 Plus 程式的 public 下：
ln -s /usr/local/src/spa/dist /usr/local/src/plus/public/spa1
如果你不用軟鏈，你可以將 /usr/local/src/spa/dist 裡面的內容全部複製到 /usr/local/src/plus/public/spa 目錄下。
然後我們現在開啟你的網站，後面輸入 /spa 檢視 H5 吧！大概的樣子如下：
#獨立域名釋出 SPA
我們在前面的教程中安裝了 Nginx 這一節教程將指導如何在獨立域名（或者埠）進行程式的釋出，因為這裡是教程，我們就換一個網路埠（因為 80 埠已經被 Plus 程式佔用）進行釋出。
我們使用 touch /usr/local/nginx/vhost/spa.conf 命令建立配置檔案，然後編輯該檔案，內容如下：
server {
listen 8080; # 因為 80 埠被佔用了，所以我們使用 8080 埠
server_name localhost; # 如果你已經為 SPA 分配了域名，那麼將這路的 localhost 替換為域名，然後 listen 可以繼續使用 80 埠！
root /usr/local/src/spa/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html$is_args$args;
}}
接下來，我們使用 cd /usr/local/src/spa 進入 Plus SPA 目錄，編輯下面的 .env 檔案，將 BASE_URL的值修改為 / 修改後的樣子：BASE_URL=/ 這樣子。將 VUE_APP_ROUTER_MODE 的值替換為 history 修改後的樣子：VUE_APP_ROUTER_MODE=history。
然後我們執行 yarn build 命令，等待命令執行完成。命令執行完成後，我們使用 nginx -s reload 命令重新載入 Nginx 配置。
然後我們在瀏覽器開啟 http://你的ip:8080 看到類似於「子目錄釋出的站點了」。
#GitHub pages 釋出 SPA
首先，你需要一個 GitHub 帳號，你可以任意建立一個空白倉庫（開啟網址 https://github.com/new），建立倉庫如下截圖：
「Initialize this repository with a README」 一定要勾選上，因為看這個教程按照零基礎進行，如果不勾選，會多處很多後續步驟，這個你們就自己學了 Git 命令自己探索吧！
接下來，我們使用 cd /usr/local/src/spa 進入 Plus SPA 目錄，編輯下面的 .env 檔案，將 BASE_URL的值修改為 倉庫名字 修改後的樣子：BASE_URL=/spa/ (這裡的值之所以是 /spa/ 是因為我們倉庫名字叫做 spa) 這樣子。將 VUE_APP_ROUTER_MODE 的值替換為 history 修改後的樣子：VUE_APP_ROUTER_MODE=history。
然後我們執行 yarn build 命令，執行完成後，我們得到了 dist 的檔案，然後將裡面的內容上傳到你建立倉庫的 gh-pages 分支中。訪問 https://.github.io/。
是你的 GitHub 使用者名稱， 是你的倉庫名稱。
## [#](http://www.thinksns.com/reader/264.html#plus-%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%90%AF%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC)**Plus 程式開啟頁面跳轉**
我們現在開啟 Plus 程式的後臺頁面，然後點選「系統設定」在「基本資訊」藍中下拉，找到 「Web 終端」的設定版。首先我們在第二項的的地方輸入 SPA 地址，輸入後開關按鈕變為可操作狀態，然後點選開啟，最後點選提交即可！截圖如下：
本作品採用《CC 協議》，轉載必須註明作者和本文連結