原文鏈接：這里
0.前言
上一篇我們說到安裝完畢青島OJ，並能夠正常運行，但是還是要修改很多東西，中間遇到一些坑，把過程記錄下來，以共參考
1.項目整體架構
根據官方說法，整個項目分為以下四個部分
- 后端(Django): https://github.com/QingdaoU/OnlineJudge
- 前端(Vue): https://github.com/QingdaoU/OnlineJudgeFE
- 判題沙箱(Seccomp): https://github.com/QingdaoU/Judger
- 判題服務器(對Judger的封裝): https://github.com/QingdaoU/JudgeServer
所謂上一篇的一鍵安裝是對上面四個模塊+數據庫的封裝，我們改的話還是要單獨改這幾個模塊，這篇文章先改前端的文件。
注：只是單獨的前端文件，沒有連接后台。
工具 選取：vscode 、nodejs(8.12.0)、nvm(自選)、
我們下載下來前端項目文件
2.windows下運行前端
我們從github上下載下來前端的源代碼。
根據官方是說法我們需要依次執行以下指令
|
1
2
3
4
5
6
7
8
9
10
11
|
npm install
# we use webpack DllReference to decrease the build time,
# this command only needs execute once unless you upgrade the package in build/webpack.dll.conf.js
set NODE_ENV=development
npm run build:dll
# the dev-server will set proxy table to your backend
set TARGET=http://Your-backend
# serve with hot reload at localhost:8080
npm run dev
|
我們先執行npm install ， 中間因為網絡問題出現過幾次中斷，重新執行即可。(或者嘗試cnpm install 操作。yarn指令也可以使用)
然后執行
set NODE_ENV=development npm run build:dll會出現如下界面。
如果執行 npm run build:dll 報下面的錯
fatal: ambiguous argument 'HEAD': unknown revision or path not in the working tree.
Error: Command failed: git rev-parse HEAD這個表示是git的錯，解決辦法有兩個
(1)不要直接從github下載zip然后解壓代碼，用git的方式下載
(2)在命令行依次執行如下指令
git init
git status
git add -A
git commit -m “custom your message”
這時在執行 npm run build:dll 就不會報錯了。
然后分別執行以下指令
set TARGET=http://127.0.0.1
npm run dev如果報以下的錯
Error: [HPM] Missing "target" option. Example: {target: "http://www.example.org"}我嘗試了一下是因為target設置的問題。在代碼中輸出target的值為undefined
我懷疑是 set TARGET=http://127.0.0.1 沒有成功執行，但是不知道如何檢測。
不過根據他報錯的信息，找到了解決方案，我們打開node_modules\http-proxy-middleware\lib\config-factory.js
把第42行到44行注釋掉，再運行npm run dev
如果沒有報這個錯 直接運行npm run dev 。 正常運行的時候千萬別忘了取消注釋。
運行 npm run dev 后，localhost會自動運行。可以看到頁面正常運行了，這個頁面是英文的，而且沒有連接后台。
全局修改中文
我們打開src/il8n/index.js 把
locale: 'en-US',
修改成
locale: 'zh-CN',
然后保存，保存的過程可能會報錯，主要是因為我插件 自動加注釋了，把這些刪除或者補充全就行了。
可以看出前端現在變成中文了。
3.linux下運行前端
本機linux環境選擇的是centos7.7 先在服務器上新建一個文件夾，用來存儲我們的前端文件。
然后在這個文件夾下面執行
git clone https://github.com/QingdaoU/OnlineJudgeFE.git
然后執行
npm install
然后執行
export NODE_ENV=development
npm run build:dll如果報錯：
TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
然后執行
export TARGET=http://127.0.0.1
npm run dev
如果報錯
UnhandledProiseRejectionWarning:Error:Exited with code 3是因為node無法正常打開你的瀏覽器才報這個錯。這個時候你需要先把8080端口打開。
然后在物理機上訪問你你虛擬機的IP地址（我的虛擬機ip是192.168.0.106）
注意：如果你虛擬機上裝了web服務（nginx,tomcat等）最好先把它停掉。
我們訪問192.168.0.106:8080
然后就可以看到下面的界面表示成功。
修改中文的方式和上面的一致。暫不解釋。