因为项目需要,需要将同一个项目部署到四个不同的服务器上,并且每一个服务器的静态文件夹名称还不能一样,这就需要在打包之前,将静态文件夹重新命名,并且修改vue或者ts等文件中静态资源的引入路径,这是相当繁琐的意见事情,作为程序员,肯定忍不了这种事情发生。
所以,我的想法就是创建一个js脚本来实现这个工作,然后将这个脚本添加到package的script脚本下面,这样我就可以一键执行脚本来完成繁琐的工作。
所以该怎么做呢?
在项目的根目录下面创建deploy.js:
const fs = require('fs')
const path = require('path')
// Function to copy a folder recursively
const copyFolderSync = (src, dest) => {
if (!fs.existsSync(dest)) {
fs.mkdirSync(dest, { recursive: true })
}
fs.readdirSync(src).forEach((item) => {
const srcPath = path.join(src, item)
const destPath = path.join(dest, item)
if (fs.lstatSync(srcPath).isDirectory()) {
copyFolderSync(srcPath, destPath)
} else {
fs.copyFileSync(srcPath, destPath)
}
})
}
// Function to update file references
const updateFileReferences = (dir, oldFolderName, newFolderName) => {
const regex = new RegExp(`${oldFolderName}`, 'g')
function updateFiles(dir) {
fs.readdirSync(dir).forEach((file) => {
const fullPath = path.join(dir, file)
if (fs.statSync(fullPath).isDirectory()) {
updateFiles(fullPath)
} else if (
file.endsWith('.js') ||
file.endsWith('.vue') ||
file.endsWith('.ts') ||
file.endsWith('.scss') ||
file.endsWith('.css') ||
file.endsWith('.json')
) {
let content = fs.readFileSync(fullPath, 'utf-8')
if (
content.includes(`${oldFolderName}`) &&
newFolderName !== oldFolderName
) {
content = content.replace(regex, `${newFolderName}`)
fs.writeFileSync(fullPath, content)
console.log(`Updated references in: ${fullPath}`)
}
}
})
}
updateFiles(dir)
}
// Main function to handle copying and renaming
const deployStaticFolder = (newFolderName) => {
const srcFolder = path.join(__dirname, 'src', 'staticasap')
const destFolder = path.join(__dirname, 'src', newFolderName)
console.log('srcFolder', srcFolder, destFolder)
if (fs.existsSync(srcFolder) && newFolderName !== 'staticasap') {
copyFolderSync(srcFolder, destFolder)
console.log(`Copied and renamed to: ${newFolderName}`)
updateFileReferences(
path.join(__dirname, 'src'),
'staticasap',
newFolderName
)
} else {
console.error(
'Source folder does not exist or newFolderName =',
newFolderName
)
}
}
// update deploy time to index.html
const updateDeployTime = () => {
const indexHtml = path.join(__dirname, 'index.html')
let content = fs.readFileSync(indexHtml, 'utf-8')
if (content.includes(`PUBLISHTIME`)) {
var currentTime = new Date()
console.log('currentTime', currentTime)
content = content.replace('PUBLISHTIME', `${currentTime}`)
fs.writeFileSync(indexHtml, content)
console.log(`Updated time in: ${indexHtml}`)
}
}
// update deploy time to index.html
const updateViteConfig = (newFolderName) => {
const viteConfig = path.join(__dirname, 'vite.config.ts')
let content = fs.readFileSync(viteConfig, 'utf-8')
if (content.includes(`staticasap`) && newFolderName !== 'staticasap') {
content = content.replaceAll('staticasap', newFolderName)
fs.writeFileSync(viteConfig, content)
console.log(`Updated vite config in: ${viteConfig}`)
}
}
// delete dist folder
const deleteDistFolder = () => {
const distFolder = path.join(__dirname, 'dist')
if (fs.existsSync(distFolder)) {
fs.rmdirSync(distFolder, { recursive: true })
console.log(`Deleted folder: ${distFolder}`)
} else {
console.log(`Folder does not exist: ${distFolder}`)
}
}
// deploy to server
// Get the new folder name from command line arguments
const newFolderName = process.argv[2]
console.log('new folder name', newFolderName)
if (newFolderName) {
deleteDistFolder()
updateDeployTime()
updateViteConfig(newFolderName)
deployStaticFolder(newFolderName)
} else {
console.error('Please provide a new folder name.')
process.exit(1)
}
其中代码的操作逻辑分为四个步骤:
1.拿到要修改静态资源文件夹名称
2.删除dist文件夹
3.更新vite配置
4.替换静态资源引入路径
5.自动部署dist文件夹到服务器中(待定)
然后将这个文件保存好,最后在pageckage里面添加脚本:
然后就可以一键执行来完成工作: