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