如何在 vue 组件中包含外部 js [英] How to include external js inside vue component

问题描述

我想使用从互联网上获取的 jQuery 幻灯片图像在我的应用程序中制作一个 幻灯片图像.此来源必须包含外部 JS 和 CSS.

I want to make a slide image in my app using jQuery Slide Image I get from internet. This source must include external JS and CSS.

我只想将这个外部库仅用于某些组件，所以我只想在一个特定组件(Home Component)中导入它.

I just want to use this external library only for certain components, so I just want to import it in only one particular component (Home Component).

我的应用程序使用 webpack 作为模块打包器.如何导入外部js文件?我试过在 Vue 组件中的 <script> 里面做它，比如

My app uses webpack as a module bundler. How do I import external js file? I have tried doing it inside <script> in Vue Components like

var slide = require('assets/template/js/jssor.slider-26.1.5.min.js');

但是我遇到了错误:

Error: Cannot find module "assets/template/js/jssor.slider-26.1.5.min.js"

我的应用结构

如果我导入 js 文件 的方式错误，那么仅在 home 组件上使用此 js 的正确方法是什么，如果我在 index 中注册，则不会命中所有组件.html

If the way I imported js files is wrong, how is the right way to use this js only on home component, without all components hit if i register in index.html

推荐答案

模块路径相对于正在编译的文件进行解析.在这种情况下，要导入外部脚本，您需要像这样的路径:

Module paths are resolved relative to the file being compiled. In this case, to import external script you need a path like:

var slide = require('../assets/template/js/jssor.slider-26.1.5.min.js');

这篇关于如何在 vue 组件中包含外部 js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！