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

Posted 2023-02-22

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

【英文标题】：How can I reference js file from node_modules folder in page head in nuxt.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 不（（

【参考方案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')]

脚本也一样