陀螺匠OA系统前端修改发布-开源版

陀螺匠OA系统前端修改默认的系统名称教程

【内容】：

完整可商用OA办公系统源码 PHP加Vue 前后端分离-陀螺匠OA

1. 确定问题。默认的情况下，系统的名称是陀螺匠OA，网页的标题显示的也是这个，现在我们就来改一下这个标题，改成你们公司自己的名称。如果你要申请短信签名一次过，改了这个你会回来谢谢我的。

如果还没有代码，请先下载好代码： https://gitee.com/ZhongBangKeJi/tuoluojiang/repository/archive/master.zip 。初始目录如下：

2. 准备Node环境。按照官方文档的推荐，我们来准备对应的Node环境。安装Node环境有两种方式，一种是直接找Nodejs 14.21.3的安装包安装，另外一种推荐用nvm方式来安装，好处是可以有多个node的版本共存，随时可以切换。我这里用nvm的方式来安装。

# 推荐环境：
node版本：14.21.3
npm版本：6.14.18

首先，下载nvm的安装包，我放附件了。解压后，按照提示安装好。打开一个命令行窗口(Win+R)cmd，输入nvm version，能正常输出版本说明安装成功。

查看可安装的Node版本：

nvm list available

因为我们这里要的是14.21.3的版本，直接执行：

nvm install 14.21.3

等待安装完成。检测是否安装成功：

node -v
npm -v

注：我这里因为是安装好的环境再还原过程，所以有些细节可能没考虑到，有问题请留言。

查看已安装的Node版本：

nvm list

再切换到我们需要的Node版本：

 num use 14.21.3

好了，NodeJs就安装好了。

3. 安装依赖组件。在这之前先说下目录路径，开源版的前端源代码目录是template\，代码发布目录在code\public\admin。发布目录是源代码编译后，把编译后的网页文件放到发布目录，前端才能访问得到修改效果。

我们切换到template目录，然后在地址栏输入cmd，打开命令行窗口。（这是个小技巧，cmd打开后自动切换到当前目录）

然后在命令行输入：

npm install

等待执行完成。

然后开启本地调试服务。

npm run dev

如果遇到以下错误，请把附件里面的eslintrc.zip下载，解压到template目录下，然后再次执行。

TIPS: 按Ctrl+C，然后输入y是中断当前脚本执行。

正常开启本地调试服务是这样：

然后我们通过浏览器访问本地地址：

 http://localhost:9527/admin/

打开看到登录页说明正常。

4. 修改默认系统标题。先用VSCODE打开template目录。

然后找到src/settings.js文件：

可以看到右边有个title字段，它就是系统的默认名称。我们改成自己的公司名称，然后保存。这里建议改成“xxxxx办公系统”这样，因为如果你去申请短信签名，这个名字需要和短信签名一样，不然容易被驳回。

然后改完之后，要重新运行一次npm run dev才能看到效果。如果网页刷新还是“陀螺匠OA”，说明有缓存，开个隐私窗口试试。

到这里其实可以直接打包，然后发布了。但是如果想在本地调试后端的接口，这里还需要改一下接口地址。

找到template/vue.config.js，然后需要改右侧的三个地址，改成你的OA域名地址，参考如下：

然后，再重新执行一次npm run dev就会发现，数据都是你自己系统的了。

5. 打包发布。停掉dev服务，然后执行：

npm run build:prod

等待执行完成。

然后打开template\dist目录，把里面的文件创建一个压缩包，我这里是dist.zip。

然后打开宝塔面板，切换到OA网站的发布目录下：

然后把dist.zip上传到这个目录，把文件解压出来覆盖掉旧文件。然后再访问一下登录页，看修改是否生效。

好了，这就是开源版的前端修改流程实战。希望有帮到你。

个人水平有限，如果错误或者更好的实现方式，欢迎指出和交流。有疑问欢迎留言。

最后，承接陀螺匠的二次开发业务，有需要深度定制OA系统的公司欢迎联系。