本篇實戰文章實戰演練一下陀螺匠OA系統開源版前端的二次開發整個過程。
【實戰目標】：修改默認的系統名稱。
【實戰內容】：
1. 確定問題。默認的情況下，系統的名稱是陀螺匠OA，網頁的標題顯示的也是這個，現在我們就來改一下這個標題，改成你們公司自己的名稱。如果你要申請短信簽名一次過，改了這個你會回來謝謝我的。
如果還沒有代碼，請先下載好代碼： https://gitee.com/ZhongBangKeJi/tuoluojiang/repository/archive/master.zip 。初始目錄如下：
2. 準備Node環境。按照官方文檔的推薦，我們來準備對應的Node環境。安裝Node環境有兩種方式，一種是直接找Nodejs 14.21.3的安裝包安裝，另外一種推薦用nvm方式來安裝，好處是可以有多個node的版本共存，隨時可以切換。我這里用nvm的方式來安裝。
# 推薦環境：
node版本：14.21.3
npm版本：6.14.18首先，下載nvm的安裝包，我放附件了。解壓后，按照提示安裝好。打開一個命令行窗口(Win+R)cmd，輸入nvm version，能正常輸出版本說明安裝成功。
查看可安裝的Node版本：
nvm list available
因為我們這里要的是14.21.3的版本，直接執行：
nvm install 14.21.3等待安裝完成。檢測是否安裝成功：
node -v
npm -v
注：我這里因為是安裝好的環境再還原過程，所以有些細節可能沒考慮到，有問題請留言。
查看已安裝的Node版本：
nvm list再切換到我們需要的Node版本：
num use 14.21.3
好了，NodeJs就安裝好了。
3. 安裝依賴組件。在這之前先說下目錄路徑，開源版的前端源代碼目錄是template\，代碼發布目錄在code\public\admin。發布目錄是源代碼編譯后，把編譯后的網頁文件放到發布目錄，前端才能訪問得到修改效果。
我們切換到template目錄，然后在地址欄輸入cmd，打開命令行窗口。（這是個小技巧，cmd打開后自動切換到當前目錄）
然后在命令行輸入：
npm install
等待執行完成。
然后開啟本地調試服務。
npm run dev如果遇到以下錯誤，請把附件里面的eslintrc.zip下載，解壓到template目錄下，然后再次執行。
TIPS: 按Ctrl+C，然后輸入y是中斷當前腳本執行。
正常開啟本地調試服務是這樣：
然后我們通過瀏覽器訪問本地地址：
http://localhost:9527/admin/
打開看到登錄頁說明正常。
4. 修改默認系統標題。先用VSCODE打開template目錄。
然后找到src/settings.js文件：
可以看到右邊有個title字段，它就是系統的默認名稱。我們改成自己的公司名稱，然后保存。這里建議改成“xxxxx辦公系統”這樣，因為如果你去申請短信簽名，這個名字需要和短信簽名一樣，不然容易被駁回。
然后改完之后，要重新運行一次npm run dev才能看到效果。如果網頁刷新還是“陀螺匠OA”，說明有緩存，開個隱私窗口試試。
到這里其實可以直接打包，然后發布了。但是如果想在本地調試后端的接口，這里還需要改一下接口地址。
找到template/vue.config.js，然后需要改右側的三個地址，改成你的OA域名地址，參考如下：
然后，再重新執行一次npm run dev就會發現，數據都是你自己系統的了。
5. 打包發布。停掉dev服務，然后執行：
npm run build:prod等待執行完成。
然后打開template\dist目錄，把里面的文件創建一個壓縮包，我這里是dist.zip。
然后打開寶塔面板，切換到OA網站的發布目錄下：
然后把dist.zip上傳到這個目錄，把文件解壓出來覆蓋掉舊文件。然后再訪問一下登錄頁，看修改是否生效。
好了，這就是開源版的前端修改流程實戰。希望有幫到你。
個人水平有限，如果錯誤或者更好的實現方式，歡迎指出和交流。有疑問歡迎留言。
最后，介紹一下自己：我是陀螺匠官方服務商，承接陀螺匠的二次開發業務，有需要深度定制OA系統的公司歡迎聯系。目前已收陀螺匠定制開發費用2萬+。
