显示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：未定义require

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

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)}}

希望它会起作用。