如何从nuxt.js页头的node_modules文件夹中引用js文件

Question

我已将onesignal-emoji-picker包添加到我的 nuxt.js vue 项目中，并且我想在我的页面中引用 css 和 js 文件而不将它们复制到静态文件夹中。css 轻松包含在nuxt.config.js：

css: ['~/node_modules/onesignal-emoji-picker/lib/css/emoji.css']

但我无法引用 js 文件，head.script部分似乎仅适用于外部资源：

script: [
  {
    src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
    type: 'text/javascript'
  },
  {
    src: '~/node_modules/onesignal-emoji-picker/lib/js/config.js',
    type: 'text/javascript'
  },
  {
    src: '~/node_modules/onesignal-emoji-picker/lib/js/util.js',
    type: 'text/javascript'
  },
  {
    src: '~/node_modules/onesignal-emoji-picker/lib/js/jquery.emojiarea.js',
    type: 'text/javascript'
  },
  {
    src: '~/node_modules/onesignal-emoji-picker/lib/js/emoji-picker.js',
    type: 'text/javascript'
  }
]

在我看来，我应该以某种方式告诉 webpack 在构建时包含这些文件并适当地引用它们？我怎么能做到？谢谢！

Answer 1

在 中nuxt.config.js，只需使用plugins包含任何内部脚本的密钥即可：

plugins: [
    { src: "~/node_modules/onesignal-emoji-picker/lib/js/config.js", mode: "client" },
    { src: "~/node_modules/onesignal-emoji-picker/lib/js/util.js", mode: "client" },
    { src: "~/node_modules/onesignal-emoji-picker/lib/js/jquery.emojiarea.js", mode: "client" },
    { src: "~/node_modules/onesignal-emoji-picker/lib/js/emoji-picker.js", mode: "client" }
]

请注意该mode: "client"选项，这意味着文件将仅在客户端上运行，从而防止在库与服务器端渲染不兼容时在服务器上出现问题。在其他情况下，您可能需要删除该标志。

Answer 2

编辑该文件./server/index.js并在此行之前添加快速静态路由app.use(nuxt.render)。

最终的start()函数应该是这样的

async function start () {
  ...

  app.use("/node_modules", express.static(path.join(__dirname, '/../node_modules')))
  // Give nuxt middleware to express
  app.use(nuxt.render)

  ....
}

node_modules进行此更改后，您可以在 vue 页面标题中添加库。

export default {
    head:{
        script: [
            { src: "/node_modules/three/build/three.min.js", type: 'text/javascript', charset: 'utf-8'}
        ]
    },
}