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項目開發效率，減少重復勞動。靈活配置適應不同部署需求。
