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