在客户端使用 NPM 包和 nuxt

Posted 2023-02-22

【中文标题】在客户端使用 NPM 包和 nuxt

【英文标题】：Using NPM packages client-side with nuxt

【发布时间】：2020-02-29 19:36:11

【问题描述】：

我对 nuxt 和 javascript 非常陌生，我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项。我将它们列在我的 nuxt.config.js 中并与 npm 一起安装。我在/plugins 目录中还有一个文件可以导入它们（不确定这是否好用）。这是我遇到麻烦的地方：我的 /static 目录中有两个脚本需要利用我的 npm 包。在这些脚本中放置导入语句会导致错误。在页面 vue 文件的脚本部分中导入包也不起作用。如何在页面客户端中包含的脚本中使用 npm 包？

【参考方案1】：

您能否提供更多信息，说明发生了哪种错误以及您尝试安装哪种软件包？

在这个例子中，我将向你展示我是如何在我的 nuxt 项目 npm 包中包含的 vuelidate

安装 vuelidate 后：

添加到 nuxt.config.js

plugins: [
    src: "~/plugins/vuelidate", mode: "client" ,
 ],

在我的插件文件夹 (plugin/vuelidate.js) 中创建 vuelidate.js 文件

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate);

之后，我可以在我的 .vue 组件中使用 vuelidate（并不总是需要导入某些内容，因为在我们的 2 阶段 Vue.use(Vuelidate) 我们已经全局安装了 vuelidate）

<script>
import  required, minLength  from "vuelidate/lib/validators";

export default 
  name: "OrderByLinkForm",
  components: ,
  ...
;
</script>

【讨论】：

感谢您的解释。假设我的静态目录中有一个运行客户端的脚本。我可以在那里访问包吗？

@GunnarSundberg 问题是 webpack 正在解析导入，但 webpack 不适用于静态文件夹（nuxtjs.org/guide/assets/#static，正如我在此处阅读的那样）。我建议您尝试将脚本移动到资产文件夹。

不导入本地的情况下如何使用导入的包？