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

【问题标题】：How to include JS file from npm package to separate page in Nuxt.js如何将 npm 包中的 JS 文件包含到 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 更新包时 - 它们会被更新。
用 ssr false 不适合的插件导入它们？
哦，我误会了。通常，导入模块（例如，使用import go from 'gojs'）并在代码中使用它是构建包含该依赖项所需要做的一切。见this demo

标签： javascript vue.js npm nuxt.js

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

【讨论】：