如何在nuxt.js的页面标题中的node_modules文件夹中引用js文件

Question

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

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

在 for k,v in pairs(t) do body end 中，只需使用 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" } ] 选项，这意味着文件将仅在客户端上运行，如果库与服务器端渲染不兼容，则可以防止服务器出现问题。在其他情况下，您可能希望移除该标志。

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)

  ....
}

更改之后，您可以在vue页面标题内添加node_modules库。

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

Answer 3

尝试使用节点路径库。我认为这是nuxt依赖项之一，因此，即使不是直接安装，也应该已经安装。

https://www.npmjs.com/package/path

然后导入您的nuxt.config.js顶部

const path = require('path')

....

css: [path.resolve(__dirname, 'node_modules/onesignal-emoji-picker/lib/css/emoji.css')]

与脚本相同