Vue项目懒人打包，双击即可

OrzR3
815 阅读6分钟

懒人打包，双击即可

使用bat脚本，完成vue项目的打包。生成dist文件夹，删除dist文件夹里面不需要的一些文件。譬如，不需要打包后dist文件夹里面的javascript文件夹。

下面，演示操作步骤：

1.初始化部分

@echo off：关闭命令回显，避免显示脚本中的每一行命令，只显示输出结果。

chcp 65001：设置字符集为 UTF-8，这样脚本中的输出可以正确显示中文字符，尤其是涉及路径或文件名时。

setlocal：启动局部变量作用域，使得在脚本运行完毕后设置的环境变量不会影响到全局环境。

2.读取 vue.config.js 中的 publicPath 配置

rem 使用 Node.js 读取 vue.config.js 中的 publicPath 配置
for /f "delims=" %%i in ('node -e "const config = require('./vue.config.js'); console.log(config.publicPath);"') do set PUBLIC_PATH=%%i

rem 用来添加注释

for /f "delims=" %%i in (...) do set PUBLIC_PATH=%%i：

通过 node 命令执行 Node.js 脚本，读取 vue.config.js 文件中的 publicPath 配置并将其值赋给 PUBLIC_PATH 环境变量。

for /f 命令的作用是从 node -e 输出中读取每一行并赋值给变量 %%i

set PUBLIC_PATH=%%i 将其保存。

3.输出 publicPath 进行调试

rem 输出 publicPath，方便调试
echo publicPath: %PUBLIC_PATH%

4.检查并设置 PROJECT_NAME

rem 检查 publicPath 并设置 PROJECT_NAME
if "%PUBLIC_PATH%"=="/" (
    set PROJECT_NAME=
) else (
    rem 从 publicPath 提取项目名称，例如 "/project_name/" -> "project_name"
    for /f "tokens=2 delims=/ " %%a in ("%PUBLIC_PATH%") do set PROJECT_NAME=%%a
)

根据 publicPath 是否为根路径（/），设置 PROJECT_NAME。

  • 如果 publicPath 为 /，则不设置项目名称。
  • 否则，使用 for /f 提取 publicPath 中的第二个路径部分作为项目名称。例如，如果 publicPath 为 /project_name/，则提取 project_name 作为项目名称。

5. 如果没有 PROJECT_NAME，则使用当前文件夹名称

rem 如果没有配置 PROJECT_NAME，则使用当前文件夹名称
if "%PROJECT_NAME%"=="" (
    for %%I in ("%cd%") do set "PROJECT_NAME=%%~nI"
)

如果 PROJECT_NAME 为空（即 publicPath 没有提供项目名称），则使用当前目录的名称作为项目名称。%cd% 获取当前工作目录，%%~nI 获取目录名称。

6. 输出 PROJECT_NAME 进行检查

rem 输出 PROJECT_NAME 的值，检查是否正确
echo PROJECT_NAME: %PROJECT_NAME%

输出 PROJECT_NAME 的值，确保它被正确设置。

7. 执行 npm run build 命令

rem 运行 npm run build 命令，并确保在同一命令行窗口内执行
echo 正在执行 npm run build...
call npm run build

输出提示信息并调用 npm run build 命令，使用 call 保证在当前命令行窗口内执行，避免新开一个子进程。

8. 检查 npm run build 是否成功

rem 检查 npm run build 是否成功
if %ERRORLEVEL% neq 0 (
    echo npm run build 执行失败，停止后续操作。
    exit /b %ERRORLEVEL%
)

if %ERRORLEVEL% neq 0：检查 npm run build 是否成功执行。

如果返回码不为 0，则表示失败。

如果失败，则输出错误信息并退出脚本，防止后续操作继续执行。

9. 检查 dist 文件夹是否生成，并进行删除和压缩操作

rem 等待 npm run build 执行完成后，检查 dist 文件夹是否已生成
set DIST_PATH=%cd%\dist\%PROJECT_NAME%\static\javascript

设置 DIST_PATH 为构建后的 JavaScript 文件路径，方便后续的删除和压缩操作。

rem 输出 DIST_PATH，方便调试
echo DIST_PATH: %DIST_PATH%

输出 DIST_PATH，方便调试，确保路径正确。

10. 删除 static\javascript 文件夹

rem 确保 dist 文件夹已生成，再进行删除和压缩
if exist "%DIST_PATH%" (
    rem 删除 static\javascript 文件夹
    echo 删除 %DIST_PATH% 文件夹...
    rmdir /s /q "%DIST_PATH%"
    echo 删除成功！

如果 DIST_PATH 对应的文件夹存在，则删除该文件夹及其所有子文件。

rmdir /s /q：/s 删除文件夹及其所有子文件，/q 安静模式，不显示提示。

11. 压缩 dist 文件夹为 .zip

    rem 输出 ZIP_PATH，方便调试
    echo ZIP_PATH: %ZIP_PATH%

    rem 压缩 dist 文件夹为 zip
    echo 正在压缩 dist 文件夹到 %ZIP_PATH%...
    powershell Compress-Archive -Path "%cd%\dist\%PROJECT_NAME%" -DestinationPath "%ZIP_PATH%" -Force

    echo 打包完成！压缩文件路径：%ZIP_PATH%

文件夹里的所有内容进行压缩，而非压缩该文件夹本身，可以这么改。

    powershell Compress-Archive -Path "%cd%\dist\%PROJECT_NAME%\*" -DestinationPath "%ZIP_PATH%" -Force

输出压缩后的文件路径 ZIP_PATH。

使用 PowerShell 的 Compress-Archive 命令将 dist 文件夹压缩成 .zip 文件。-Force 强制压缩，覆盖已存在的文件。

12.结束部分

endlocal
pause

endlocal：结束局部变量作用域，恢复环境变量的原始值。

pause：暂停脚本，等待用户按键后关闭命令行窗口，方便查看执行结果。

完整代码：

@echo off
chcp 65001
setlocal

rem 使用 Node.js 读取 vue.config.js 中的 publicPath 配置
for /f "delims=" %%i in ('node -e "const config = require('./vue.config.js'); console.log(config.publicPath);"') do set PUBLIC_PATH=%%i

rem 输出 publicPath，方便调试
echo publicPath: %PUBLIC_PATH%

rem 检查 publicPath 并设置 PROJECT_NAME
if "%PUBLIC_PATH%"=="/" (
    set PROJECT_NAME=
) else (
    rem 从 publicPath 提取项目名称，例如 "/sy_entry/" -> "sy_entry"
    for /f "tokens=2 delims=/ " %%a in ("%PUBLIC_PATH%") do set PROJECT_NAME=%%a
)

rem 如果没有配置 PROJECT_NAME，则使用当前文件夹名称
if "%PROJECT_NAME%"=="" (
    for %%I in ("%cd%") do set "PROJECT_NAME=%%~nI"
)

rem 输出 PROJECT_NAME 的值，检查是否正确
echo PROJECT_NAME: %PROJECT_NAME%

rem 运行 npm run build 命令，并确保在同一命令行窗口内执行
echo 正在执行 npm run build...
call npm run build

rem 检查 npm run build 是否成功
if %ERRORLEVEL% neq 0 (
    echo npm run build 执行失败，停止后续操作。
    exit /b %ERRORLEVEL%
)

rem 等待 npm run build 执行完成后，检查 dist 文件夹是否已生成
set DIST_PATH=%cd%\dist\%PROJECT_NAME%\static\javascript

rem 输出 DIST_PATH，方便调试
echo DIST_PATH: %DIST_PATH%

rem 设置压缩目标文件路径
set ZIP_PATH=%cd%\dist\%PROJECT_NAME%.zip

rem 确保 dist 文件夹已生成，再进行删除和压缩
if exist "%DIST_PATH%" (
    rem 删除 static\javascript 文件夹
    echo 删除 %DIST_PATH% 文件夹...
    rmdir /s /q "%DIST_PATH%"
    echo 删除成功！

 

    rem 输出 ZIP_PATH，方便调试
    echo ZIP_PATH: %ZIP_PATH%

    rem 压缩 dist 文件夹为 zip
    echo 正在压缩 dist 文件夹到 %ZIP_PATH%...
    
    @REM powershell Compress-Archive -Path "%cd%\dist\%PROJECT_NAME%" -DestinationPath "%ZIP_PATH%" -Force
    powershell Compress-Archive -Path "%cd%\dist\%PROJECT_NAME%\*" -DestinationPath "%ZIP_PATH%" -Force

    echo 打包完成！压缩文件路径：%ZIP_PATH%
) else (
    echo dist 文件夹不存在，跳过删除和压缩操作。
)

endlocal
pause

指定压缩某些文件夹

譬如，我想把项目中的某些文件夹 controls 等等，进行压缩。也可以这样写：

@echo off
chcp 65001
:: 如果没有配置 PROJECT_NAME，则使用当前文件夹名称
if "%PROJECT_NAME%"=="" (
    for %%I in ("%cd%") do set "PROJECT_NAME=%%~nI"
)

:: 设置压缩包输出路径
set ZIP_PATH=%cd%\%PROJECT_NAME%.zip

:: 使用 PowerShell 压缩文件夹
echo 正在压缩文件夹...
powershell Compress-Archive -Path "%cd%\controls", "%cd%\routes", "%cd%\models" -DestinationPath "%ZIP_PATH%" -Force

echo 压缩完成: %ZIP_PATH%
pause

脚注

常见的BAT脚本命令：


echo：在控制台输出字符串或变量，如echo Hello World。

set：设置变量，如set /p variableName=Please enter a value:。

pause：暂停脚本执行，直到用户按键，如pause。

if：条件判断，如if "%variableName%"=="value" echo True。

goto：跳转到指定标签，如goto label。

call：调用另一个批处理文件，如call otherBatchScript.bat。

rem：添加注释，如rem This is a comment。

for：循环，如for %%i in (1 2 3) do echo %%i。

dir：列出文件夹内容，如dir。

cd：改变当前目录，如cd C:\Windows。

start：启动一个新的窗口运行指定的程序或命令，如start notepad.exe。

exit：退出批处理脚本，如exit。
avatar
文章
阅读
粉丝