如何将 npm 包中的 JS 文件包含到 Nuxt.js 中的单独页面

Posted 2023-02-22

【中文标题】如何将 npm 包中的 JS 文件包含到 Nuxt.js 中的单独页面

【英文标题】：How to include JS file from npm package to separate page in Nuxt.js

【发布时间】：2019-07-25 21:15:31

【问题描述】：

我有几个带有客户端脚本的 npm 包，我想将它们包含在我的 Nuxt.js 项目的单独页面中。我尝试过这样做：

<script>
export default 
  head: 
    script: [
       src: "gojs/release/go.js", type: "text/javascript" 
    ]
  ,

  // ...

</script> 

但收到404 (Not Found) 错误。这样做的正确方法是什么？

【问题讨论】：

尝试将文件包含为static assets（例如/assets/static/gojs/release/go.js），这将使它们在根目录中可用（/）。然后在您的.vue 中，src 网址应以/ (/gojs/release/go.js) 为前缀。

是的，我知道这种方式，但我想包含来自 node_modules 的脚本，所以当我使用 npm 更新包时 - 它们会被更新。

用 s-s-r false 不适合的插件导入它们？

哦，我误会了。通常，导入模块（例如，使用import go from 'gojs'）并在代码中使用它是构建包含该依赖项所需要做的一切。见this demo

【参考方案1】：

通常，import-ing 模块（例如，使用 import go from 'gojs'）并在您的代码中使用它是构建包含该依赖项所需要做的一切。无需添加标题即可加载 NPM 模块。

MyFoo.vue中的示例：

<script>
import go from 'gojs'

export default 
  mounted() 
    const $ = go.GraphObject.make;
    const myDiagram =
      $(go.Diagram, "myDiagramDiv",
        
          "undoManager.isEnabled": true
        );

    ...
  

</script>

demo