目录
- 0.前言
- 1.项目整体架构
- 2.windows下运行前端
- 3.linux下运行前端
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上下载下来前端的源代码。
根据官方是说法我们需要依次执行以下指令
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 使用下面的办法解决：
*是nodejs版本问题，人家原版要求8.12.0，我的版本是12.18.0。然后经过百度发现，只有10以上的版本会有这个问题，那么调回低版本就行了。 *
然后执行
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
然后就可以看到下面的界面表示成功。
修改中文的方式和上面的一致。暂不解释。
