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

【问题标题】：How can I reference js file from node_modules folder in page head in nuxt.js如何从 nuxt.js 页头的 node_modules 文件夹中引用 js 文件
【发布时间】：2019-09-17 03:04:19
【问题描述】：

我已将包 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 在构建时包含这些文件并适当地引用它们？我怎么能做到？谢谢！

【问题讨论】：

嘿@Andrey 有什么答案吗？我也想知道...
@SabaAhang 不（（

标签： vue.js webpack nuxt.js

【解决方案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" 选项，这意味着文件将仅在客户端上运行，如果库与服务器端渲染不兼容，则可以防止服务器上出现问题。在其他情况下，您可能需要删除该标志。

【讨论】：

【解决方案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'}
        ]
    },
}

【讨论】：

【解决方案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')]

脚本也一样

【讨论】：