bat脚本使用笔记之vue打包到Java工程中

随着vue的流行，越来越多的项目使用了vue作为前端框架，项目中遇到需要将vue打包到spring boot 中的static中，直接访问，不需要使用nginx，我们的方式是保持前后端完全独立开发代码，项目代码互不影响，借助jenkins这样的构建工具在构建springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到springboot下再进行jar的打包，最后就得到了一个完全包含前后端的springboot项目了，但是有时候需要本地打个完整的包，需要手工合并，并且容易出错，于是写了一个bat脚本在本地需要打包时使用。脚本如下供参考:

@echo off
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

::替换vue.config.js的配置
setlocal EnableDelayedExpansion

echo %~dp0

set filePath=%~dp0\ijczz-meeting-web\vue.config.js
set oldContent=publicPath: '/'
set newContent=publicPath: '/ijczz-meeting/meeting'
echo %filePath%
echo %oldContent%
echo %newContent%

:: 逐行遍历文件内容
for /f "delims=" %%l in (%filePath%) do (
    echo %%l
    set line=%%l
    :: 替换字符串
    set "line=!line:%oldContent%=%newContent%!"
    echo !line!
    :: 将内容重定向输出到临时文件中
    echo !line!>>temp.txt
)
:: 移动临时文件到原文件路径中，并重命名为原文件名，覆盖掉原文件
move temp.txt %filePath%

::替换settings.js的配置
set filePath2=%~dp0\ijczz-meeting-web\src\store\modules\settings.js
set oldContent2='/apis'
set newContent2='/ijczz-meeting'
echo %filePath2%
echo %oldContent2%
echo %newContent2%
:: 逐行遍历文件内容
for /f "delims=" %%l in (%filePath2%) do (
    echo %%l
    set line=%%l
    :: 替换字符串
    set "line=!line:%oldContent2%=%newContent2%!"
    echo !line!
    :: 将内容重定向输出到临时文件中
    echo !line!>>temp.txt
)
move temp.txt %filePath2%
:: 打包
cd %~dp0\ijczz-meeting-web
call npm install 
call npm run build:prod --report
:: 删除文件
del /F /S /Q %~dp0\ijczz-meeting\src\main\resources\views\index.html
del /F /S /Q %~dp0\ijczz-meeting\src\main\resources\static\meeting\static
del /F /S /Q %~dp0\ijczz-meeting\src\main\resources\static\meeting\ueditor
del /F /S /Q %~dp0\ijczz-meeting\src\main\resources\static\meeting\favicon.ico
:: 复制文件
xcopy %~dp0\ijczz-meeting-web\dist\index.html  %~dp0\ijczz-meeting\src\main\resources\views\* /s /e
xcopy %~dp0\ijczz-meeting-web\dist\static\*  %~dp0\ijczz-meeting\src\main\resources\static\meeting\static\* /s /e
xcopy %~dp0\ijczz-meeting-web\dist\ueditor\*  %~dp0\ijczz-meeting\src\main\resources\static\meeting\ueditor\* /s /e
xcopy %~dp0\ijczz-meeting-web\dist\favicon.ico %~dp0\ijczz-meeting\src\main\resources\static\meeting\* /s /e

pause

bat脚本的内容包括了定义变量，替换字符串，调用npm打包，复制文件等语法，作为对bat脚本的初学者，get到bat脚本的语法的几个知识点：

（1）在定义变量的时候不能留空格，比如filePath=%~dp0\ijczz-meeting-web\vue.config.js

这里的等号两边不能留空格，%~dp0是指当前获取当前bat文件的目录，所以这个bat文件的执行位置应该要放在当前要执行该操作的工程同一个目录下。

（2）bat脚本的替换文本字符串是通过每一行的比较，发现了需要替换的文字，然后把新的文字替换进去，然后把新生成的文件替换旧的文件，具体语法类似是 for /f "delims=" %%l in (%filePath%) do (set line=%%l  set "line=!line:%oldContent%=%newContent%!" echo !line!>>temp.txt)  move temp.txt  vue.config.js 

（3）调用npm打包的时候如果不加call，如：call npm install ，则会在npm打完包之后直接退出dos界面，在批处理脚本中，call命令用来从一个批处理脚本中调用另一个批处理脚本，通过这种方式则不会出现打完包直接退出，不执行后面dos命令的情况。

（4）复制文件夹的命令是xcopy，不是copy，xcopy可以复制某个文件夹底下的所有子文件夹和文件，需要注意/s /e就是指复制整个目录下的文件及文件夹，不包括空子文件夹。

（5）如果要让执行完整个bat脚本之后dos界面不消失，最有效的方式是通过在注册表里编辑HKEY_CLASSES_ROOT\batfile\shell\open\command，修改该项的数值数据为：cmd /E:ON /V:ON /F:ON /k "%1" %*   即可。