显示 ReferenceError 的 Vuejs vue-truncate-filter 包

Question

我已经为 VueJs 安装了 npm install vue-truncate-filter --save 来剪切额外的字符串以达到 UI 的目的。根据包文档，我已经在我的应用程序中逐步实现了包，但它显示错误。我在这里写相同的步骤，请指导我哪里错了：

1- 使用 npm 安装 vue-trauncate-filter 包

npm install vue-truncate-filter --save

2- 在应用程序中包含 vue-trancate-filter

var VueTruncate = require('./node_modules/vue-truncate-filter');
Vue.use(VueTruncate)

3- 使用此代码在我的模板中使用它

{{ text | truncate 100 '....' }}

实施后，当我在浏览器中点击 url 时，它显示以下错误 ReferenceError: 要求未定义

我试图找到解决方案，但我无法解决问题。提前感谢您的帮助。

Answer 1

一种方法是在您的 html 文件中包含像传统 javascript 一样的文件。不要添加要求，我正在放置我从您的代码中理解的路径。路径不对请根据你的目录制作

<script src="./node_modules/vue-truncate-filter/vue-truncate.js"></script>

包含此文件后，只需从您的代码中删除以下代码

var VueTruncate = require('./node_modules/vue-truncate-filter');
Vue.use(VueTruncate)

您用来隐藏额外字符串的代码仅适用于 vuejs 1，不适用于 vuejs 2，因此请替换您的代码

{{ text | truncate 100 '....' }}

使用此代码，它适用于 vuejs 2

{{ text | truncate(100)}}

希望它会起作用。