Nuxt3生产构建时,将项目根目录下的pm2启动文件ecosystem.config.js迁移到打包输出目录

400 阅读2分钟

方式一: 通过修改 package.json 中 build 构建命令实现

1. 在项目根目录下新建 scripts/copyFile.ts。

捕获3.PNG

2. 项目根目录下 ecosystem.config.js 文件, 内容如下。

  module.exports = {
    apps: [{
        // 项目名称
        name: 'nuxt-front-blog',
        // 监听端口
        port: '9000',
        // 运行模式
        exec_mode: 'cluster',
        // 开启的实例数
        instances: 'max',
        // 运行的入口文件
        script: './server/index.mjs'
    }]
}

3. 编写迁移 ecosystem.config.js 的脚本文件 copyFile.ts。

const fs = require("fs");
const path = require("path");

// 获取命令行参数
const argvs = process.argv.slice(2);

// 校验参数是否存在
if (!argvs || !argvs.length) {
    throw new Error("文件名不能为空,请填写后再试!");
}

// 读取文件内容
const readFile = async(filePath: string):Promise<void | string> => {
    try {
        const file = await fs.readFileSync(path.join(process.cwd(), filePath));
        return file.toString();
    } catch (err) {
        throw err;
    }
}

// 写入内容到文件
const writeFile = async(filename: string, content: string): Promise<void> => {
    try {
        await fs.writeFileSync(path.join(process.cwd(), ".output", filename), content);
    } catch (err) {
        throw err;
    }
}

// 迁移文件操作函数
const run = async(): Promise<void> => {
    const handlerList:Promise[] = [];
    for (let i = 0; i < argvs.length; i++) {
        const handler = new Promise(async(resolve, reject) => {
            try {
                // 读取文件
                const content = await readFile(argvs[i]);
                // 写入文件
                await writeFile(argvs[i], content);
                // 执行成功
                resolve("success");
            } catch (err) {
                reject(err);
            }
        });
        handlerList.push(handler);
    }
    try {
        await Promise.all(handlerList);
    } catch (err) {
        throw err;
    }
}

// 运行copy操作
run();

4. 修改 package.json 中 build 打包运行命令, 如下图。

<!-- 注: ecosystem.config.js为需要迁移的文件路径,可以有多个,文件路径之间通过空格隔开 -->
"build": "nuxt build && ts-node ./scripts/copyFile.ts ecosystem.config.js",

5. 运行 pnpm build 命令进行生产产物构建。

6. 运行成功后在打包输出目录.output 中存在 ecosystem.config.js 文件如下图,至此,迁移完成。😂

捕获4.PNG

方式二:通过在 nuxt3 项目配置文件 nuxt.config.ts 中添加 Close 钩子实现

1. 项目根目录下 ecosystem.config.js 文件, 内容如下图。

  module.exports = {
    apps: [{
        // 项目名称
        name: 'nuxt-front-blog',
        // 监听端口
        port: '9000',
        // 运行模式
        exec_mode: 'cluster',
        // 开启的实例数
        instances: 'max',
        // 运行的入口文件
        script: './server/index.mjs'
    }]
}

2. 在项目根目录下 nuxt.config.ts 文件中添加如下配置。

 hooks: {
   // 该钩子函数会在项目构建输出完成后运行
    close: async () => {
      // 读取文件内容
      const readFile = async (filePath: string): Promise<void | string> => {
        try {
          const file = await fs.readFileSync(
            path.join(process.cwd(), filePath)
          );
          return file.toString();
        } catch (err) {
          throw err;
        }
      };

      // 写入内容到文件
      const writeFile = async (
        filename: string,
        content: string,
        writePath: string
      ): Promise<void> => {
        try {
          await fs.writeFileSync(
            path.join(process.cwd(), writePath, filename),
            content
          );
        } catch (err) {
          throw err;
        }
      };

      // 读取的文件路径
      const filePath = "ecosystem.config.js";
      // 文件的输出目录路径
      const fileOutputPath = ".output";
      // 读取文件
      const content = (await readFile(filePath)) as string;
      // 获取文件名
      const filename = path.basename(filePath);
      // 写入文件
      await writeFile(filename, content, fileOutputPath);
    },
  },

3. 运行 pnpm build 命令进行生产产物构建。

4. 运行成功后在打包输出目录.output 中存在 ecosystem.config.js 文件如下图,至此,迁移完成 😎。

捕获4.PNG