為縮減篇幅，已略去nodejs、git等軟件安裝操作，若有疑問請搜索相關教程。
為區分win和ubuntu的命令，作如下約定：
$ cd //以$標記win下命令 # cd //以#標記linux命令
環境：win10，qduoj前端github：https://github.com/QingdaoU/OnlineJudgeFE
1、下載源碼並解壓，或用git拉取源碼：
$ git clone https://github.com/QingdaoU/OnlineJudgeFE.git
2、安裝依賴：
$ cd .\OnlineJudgeFE\
$ cnpm install
3、按照官方文檔繼續進行：
$ npm run build:dll
4、打開文件 \OnlineJudgeFE\config\index.js，起始位置加入一行以指定后台數據來源：
process.env.TARGET = ‘http://192.168.78.128/’
也可以直接指向qduoj：
process.env.TARGET = ‘https://qduoj.com/’
5、啟動本地測試：
$ npm run dev
效果如圖：
前端使用Vue框架編寫，官網：https://cn.vuejs.org/
6、修改完成后打包：
$ npm run build
7、讓OJ加載修改后的前端文件
在dist文件夾里生成的文件，就是編譯后的前端文件。
首先要把修改后的文件傳輸到ubuntu，我們使用WinSCP，
通過其連接虛擬機：
把dist文件夾直接拖到ubuntu中，比如圖中位置/home/zzh：
接着，打開OJ配置文件docker-compose.yml：
# vim docker-compose.yml
在volumes項中新增一行，路徑請根據實際情況修改：
…
oj-backend:
image: registry.cn-hangzhou.aliyuncs.com/onlinejudge/oj_backend
container_name: oj-backend
restart: always
depends_on:
– oj-redis
– oj-postgres
– judge-server
volumes:
– $PWD/data/backend:/data
– /home/zzh/dist:/app/dist # 新增此行
environment:
– POSTGRES_DB=onlinejudge
– POSTGRES_USER=onlinejudge
– POSTGRES_PASSWORD=onlinejudge
– JUDGE_SERVER_TOKEN=CHANGE_THIS
# – FORCE_HTTPS=1
# – STATIC_CDN_HOST=cdn.oj.com
ports:
– “0.0.0.0:80:8000”
– “0.0.0.0:443:1443”
更新：
# sudo -E docker-compose up -d
再次訪問測試：
我只修改了導航欄標題內容，可以看到確實生效了。
本文至此結束，若有疑問請在評論區討論~