需求
-
Vue
项目,打包后会生成一个dist/
目录 -
将该目录下的
index.html
复制N
份,文件名为8位随机字符串.html
思路
-
首先需要生成复制后的文件名列表,这里通过
js
生成随机字符串,将其保存在一个文件distFiles.txt
中 -
编写一个批处理文件
distCopy.bat
,读取distFiles.txt
文件中的数据,复制index.html
文件
实现
- 在根目录下编写
distConfig.js
文件
const fs = require('fs')
// 若文件不存在,创建一个
function fileCreate(filename) {
return new Promise((resolve, reject) => {
fs.exists(filename, function(exists) {
if(!exists) {
fs.writeFile(filename, '', function(err) {
if(err) {
// console.log(err)
reject(new Error('file create failed'))
}
resolve()
})
} else {
resolve()
}
})
})
}
// 增量更新随机文件名
function fileWrite() {
const filename = 'distFiles.txt'
const str = randomString(8) + '.html'
return new Promise((resolve, reject) => {
// 先读取文件内容
fileCreate(filename).then(() => {
fs.readFile(filename, 'utf8', (err, data) => {
if (err) {
reject(err)
}
data += str + '\r\n'
content = data
// 追加随机文件名
fs.writeFile(filename, content, (err) => {
if (err) {
reject(err)
}
resolve()
})
})
}).catch((err) => {
reject(err)
})
})
}
// 生成随机字符串
function randomString(len) {
len = len || 32
// 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var maxPos = $chars.length
var pwd = ''
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
}
// 生成随机文件名并写入文件
async function dataCreate(sum) {
for (let i = 0; i < sum; i++) {
await fileWrite()
}
}
dataCreate(50)
-
运行
node ./distConfig.js
,会在根目录下生成distFiles.txt
文件。改文件里面每行都是一个随机字符串命名的html
文件 -
在根目录下编写
distCopy.bat
文件
@echo off
:: setlocal ENABLEDELAYEDEXPANSION
:: for /l %%i in (1,1,20) do (
:: copy /y %cd%\dist\index.html %cd%\dist\shoe%%i.html
:: )
for /f "delims=" %%a in (%cd%\distFiles.txt) do (
copy /y %cd%\dist\index.html %cd%\dist\%%a
)
:: dir %cd%\dist\*.html /b > %cd%\distHtmls.txt
pause
- 每次
Vue
项目打包后,双击运行distCopy.bat
即可在dist/
目录下复制出50
份html
文件
备注:
distConfig.js
、distFiles.txt
和distCopy.bat
文件不能放在dist/
目录下,因为Vue
项目每次打包都会先删除dist/
目录
发表评论