如何在Nuxt应用中添加构建与开发前执行的自定义Node脚本？

别直接把脚本塞nuxt.config.js里 #

nuxt.config.js是管项目核心配置的地方，虽然能写点逻辑，但把图标处理这种独立操作放进去，会让配置文件变得臃肿杂乱，后续维护起来特别麻烦，完全没必要。

推荐这几种靠谱方案 #

1. 单独写脚本，通过package.json命令触发 #

• 在项目根目录建个scripts文件夹，里面新建icon-processor.js，把图标处理的Node.js代码全写这儿。
• 改一下package.json里的scripts命令，让启动开发或构建前先跑这个脚本：

  {
    "scripts": {
      "dev": "node scripts/icon-processor.js && nuxt dev",
      "build": "node scripts/icon-processor.js && nuxt build"
    }
  }
  

  以后每次执行npm run dev或者npm run build，都会先处理图标，再启动Nuxt的服务或构建。

2. 用Nuxt钩子绑定生命周期 #

要是想让脚本跟着Nuxt的启动/构建流程自动跑，不用手动改命令，可以用Nuxt的钩子，但别把逻辑直接写进配置文件，还是把脚本单独放，然后在钩子中调用：

• 先在scripts/icon-processor.js里写好逻辑并导出函数：

  // scripts/icon-processor.js
  module.exports = async function processIcons() {
    // 这里写你的图标处理逻辑，比如压缩、生成多尺寸、转格式等
    console.log('图标处理完成')
  }
  

• 然后在nuxt.config.js里引入这个函数，绑定到合适的钩子上：

  // nuxt.config.js
  const processIcons = require('./scripts/icon-processor')
  
  export default defineNuxtConfig({
    hooks: {
      // 构建前执行
      'build:before': async () => {
        await processIcons()
      },
      // 开发服务准备阶段执行
      'dev:prepare': async () => {
        await processIcons()
      }
    }
  })
  

  这样不管是启动开发服务还是执行构建，都会自动触发图标处理，既保持了配置文件的清爽，又能和Nuxt的流程联动。

3. 封装成Nuxt模块（适合复杂场景） #

如果你的图标处理逻辑特别复杂，还需要和其他Nuxt功能集成或者复用，那可以把它做成自定义Nuxt模块。不过这种方式有点重，简单的图标处理用前两种方案就够了。

总结 #

• 简单需求直接选单独脚本+package.json命令，直观好维护；
• 想跟着Nuxt流程自动跑就选钩子+外部脚本，不脏配置文件；
• 绝对别把完整的处理逻辑直接写进nuxt.config.js，纯属给自己添乱。

内容的提问来源于stack exchange，提问作者Skif