Nuxt3自动打包及自动修改端口号脚本技术文章大纲
背景与需求
Nuxt3作为现代Vue框架，开发中常需处理打包部署和端口配置问题。自动化脚本可提升效率，减少手动操作错误。
实现自动打包
利用Nuxt3内置命令结合Node.js脚本实现自动化构建。通过npm run build生成生产环境代码，脚本可集成环境变量和自定义参数。开发服务器默认端口为3000，通过自动打包插件读取index.mjs文件修改端口号。
// 根目录下创建 build-and-test.js
import { execSync, spawn } from 'child_process';
import fs from 'fs';
import http from 'http';const BUILD_CMD = 'npm run build';
const OUTPUT_ENV = '.output/.env';
const SERVER_ENTRY = '.output/server/index.mjs';
const NEW_PORT = 3001;// 1. 打包
console.log('开始生产环境打包...');
execSync(BUILD_CMD, { stdio: 'inherit' });// 直接替换 .output/server/index.mjs 里的端口号
const serverEntryPath = '.output/server/index.mjs';
if (fs.existsSync(serverEntryPath)) {let serverEntryContent = fs.readFileSync(serverEntryPath, 'utf-8');// 替换 const port = destr(process.env.NITRO_PORT || process.env.PORT) || 3e3;serverEntryContent = serverEntryContent.replace(/const port = destr\(process\.env\.NITRO_PORT \|\| process\.env\.PORT\) \|\| 3e3;/,`const port = ${NEW_PORT};`);fs.writeFileSync(serverEntryPath, serverEntryContent, 'utf-8');console.log(`已将 .output/server/index.mjs 端口号强制替换为 ${NEW_PORT}`);
}// 3. 启动产物
const server = spawn('node', [SERVER_ENTRY], {stdio: 'inherit',detached: false,
});// 4. 测试端口连通性
setTimeout(() => {console.log(`测试 http://localhost:${NEW_PORT}`);http.get(`http://localhost:${NEW_PORT}`, (res) => {if (res.statusCode === 200) {console.log('✅ 服务启动成功！');} else {console.log('⚠️ 服务启动，但返回码不是200:', res.statusCode);}server.kill();process.exit(0);}).on('error', (e) => {console.error('❌ 服务未能正常启动:', e.message);server.kill();process.exit(1);});
}, 5000); // 等待5秒让服务启动脚本运行命令行配置
// package.json 中添加下面这一行作为打包命令行。"scripts": {..."build-and-test": "node build-and-test.js",},
实际应用场景
适用于CI/CD流水线、多环境部署或团队协作开发。脚本可扩展为自动化测试、代码检查等流程。
注意事项
- 确保端口及环境变量信息配置正确
- 部署后验证效果是否端口更改成功
- 错误日志记录机制
总结
自动化脚本显著提升Nuxt3项目开发效率，减少重复劳动。灵活配置适应不同部署需求。
