Question

我试图在使用vue.js作为客户端JS引擎的intellij环境中使用webpack和gradle结合使用。

我首先使用vue配置文件构建一个新的grails项目：

grails create-app foobar --profile=vue

最初，我在将新的 xyz.vue 主屏幕与vue库集成时遇到了问题，所以我通过克隆由配置文件创建的Welcome.vue文件并将其黑客攻击直到遇到它为止我的需要。

不幸的是，我现在处于想要添加新js库的阶段：https://github.com/amsik/liquor-tree。

我已按照建议尝试使用npm安装它，但我无法找到将其包含在我的'.vue'文件中的方法。每次我尝试，js运行时告诉我它无法找到Vue类或vue-tree。我相信webpack将所有npm管理的js模块组合到一个名为bundle.js的文件中，但我找不到包含该文件的任何地方，所以这有点神秘。

我的webpack.config.js如下所示：

var path = require("path")

module.exports = {
    "entry": "./lib/index.js"
,   "output": {
        "path": __dirname + "/build"
    ,   "filename": "xxhash.js"
    ,   "library": "XXH"
    ,   "libraryTarget": "umd"
    }
}

================== 由andy编辑：

法提赫，我的坏，我知道，但问题不在于进口方面。这一切都很好 - 我成功地做了一个

import LiquorTree from 'liquor-tree'

在我的main.js.当我试图按照你的建议将node_modules及其变体添加到路径时，我得到了一个找不到文件的错误，所以我恢复到没有路径前缀的表单，这个工作正常。这就像白酒树README中记录的那样 - 在我提供的链接上。

为了整理一切，我把所有东西都清理干净，从一开始就重新开始 - 瞧，它的确有效。

即使您的答案实际上没有解决问题，我想我必须将您的答案标记为正确的答案。我真的不想失去我辛苦赚来的声望点，但这是我自己的错，因为没有让问题更清晰。何哼哼：'（年龄更大，更聪明。

Answer 1

您应该import组件中的第三方库，而不是在Webpack配置中执行此操作。请参阅下面的代码段。

<script>
  import thirdPartyLibrary from '../../node_modules/library-name/dist/library';
</script>

确保更新项目的node_modules文件夹的路径。

将第三方JS库添加到Webpack / Grails / Gradle项目中

1 个答案: