如何在Nuxt3/Vue应用中正确引入并配置Houdini PaintWorklet

第一步：配置静态资源映射 #

你不需要手动拷贝文件到项目目录，通过 Nuxt 内置的 Nitro 配置即可直接将 node_modules 内的指定文件作为静态资源对外提供：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    publicAssets: [
      {
        // 自定义对外访问的路径前缀
        baseURL: '/paint-worklets',
        // 本地 node_modules 中存放目标worklet的目录
        dir: 'node_modules/你的依赖包名/对应文件所在目录',
        // 生产环境可加长期缓存配置
        maxAge: 60 * 60 * 24 * 365
      }
    ]
  }
})

配置完成后，目标worklet文件的访问路径为 /paint-worklets/[worklet文件名].js，开发和生产环境都会自动生效。

第二步：编写客户端注册插件 #

你之前对插件的理解有误：插件只需要存放注册逻辑，不需要包含Worklet本身的代码，自然不需要修改Worklet的导出配置，符合插件导出要求的写法如下：

// plugins/paint-worklet.client.js
export default defineNuxtPlugin(() => {
  // 兼容不支持 PaintWorklet 的浏览器，避免报错
  if (typeof CSS !== 'undefined' && CSS.paintWorklet) {
    CSS.paintWorklet.addModule('/paint-worklets/你的worklet文件名.js')
  }
})

验证方案有效性 #

执行 nuxt build 后再执行 nuxt preview 启动生产预览，访问对应静态资源路径确认文件可正常加载，查看页面效果是否符合预期即可。

Nuxt2 兼容方案 #

如果使用Nuxt2，可通过 copy-webpack-plugin 实现文件拷贝：

1. 安装依赖：npm i copy-webpack-plugin -D
2. 配置 nuxt.config.js：

const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  build: {
    extend(config, { isDev, isClient }) {
      config.plugins.push(
        new CopyPlugin({
          patterns: [
            {
              from: 'node_modules/你的依赖包名/xxx/worklet.js',
              to: 'static/worklets/worklet.js'
            }
          ]
        })
      )
    }
  }
}

注册时引用路径为 /static/worklets/worklet.js 即可。

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