vuejs 引入外部js
在Vue.js中引入外部JavaScript文件可以通过几种不同的方法实现：
1. 在index.html中直接引入
在项目的public/index.html文件中，你可以直接通过<script>标签引入外部JS文件。这种方法简单直接，适用于全局使用的脚本或者第三方库。
<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<div id="app"></div>
<!-- 引入外部JS文件 -->
<script src="https://example.com/some-external-library.js"></script>
</body>
</html>2. 在Vue组件中动态引入
如果你想在特定的Vue组件中引入外部JS文件，可以使用JavaScript的import()函数或者createElement方法动态创建<script>标签。
// 在Vue组件的mounted钩子中引入
export default {
name: 'MyComponent',
mounted() {
const script = document.createElement('script');
script.src = 'https://example.com/some-external-library.js';
script.onload = () => {
// 脚本加载完成后的操作
};
document.head.appendChild(script);
}
};3. 使用模块系统
如果外部JS文件支持ES模块或者CommonJS规范，你可以使用import或require语句在Vue组件中引入。
// 使用ES模块语法
import externalModule from 'external-module';
// 或者使用CommonJS语法
const externalModule = require('external-module');4. 使用npm包管理器
如果外部JS文件是一个npm包，你可以使用npm或yarn将其安装到项目中，然后在Vue组件中通过模块系统引入。
npm install external-module
# 或者
yarn add external-module// 在Vue组件中引入安装的npm包
import externalModule from 'external-module';注意事项
- 当你在Vue组件中动态引入外部JS文件时，需要确保脚本加载完成后再执行依赖于该脚本的代码。
- 如果外部JS文件修改了全局状态，可能会导致Vue组件的状态管理变得复杂，因此应尽量避免这种情况。
- 使用模块系统引入外部JS文件可以更好地进行代码分割和懒加载，有助于提高应用的性能。
选择哪种方法取决于你的具体需求和外部JS文件的特性。通常情况下，如果外部库提供了模块化的支持，推荐使用模块系统引入，这样可以更好地与Vue的构建系统和模块化机制集成。
相关·内容
我有一个asp.net核心项目，它使用vuejs框架(javascript) --这是页面结构的一个示例(为了简单起见，所有内容都去掉了)<div id="page-1"><script src='~/page-1.js' defer></script>(function () {
var Page1Vu
浏览 6提问于2019-12-17得票数 1
我试图从外部javascript函数调用vuejs函数，但它没有调用，我给出了下面的代码，我正在尝试。//下面是我的vuejs代码vu.js Ut = { },alert("Succes"); }
} /&#x
浏览 26提问于2021-02-09得票数 0
1回答
我想手动拉出脚本并将其插入到VueJS组件中。例如，拉取Bootstrap CDN或其他外部JS脚本并手动插入到VueJS组件中。这有可能吗？
谢谢!
浏览 6提问于2018-01-10得票数 1
1回答
如何使用Vuejs 2加载外部html页面？这是我在jquery中的代码<div class="main" id="main" style="height: 600px; width: 1200px;">
JS $('div.main').load('main_template.html');
如果可
浏览 3提问于2017-06-20得票数 2
1回答
使用vuejs。是否可以从外部文件中更改某个数据变量的值？例如export default{ somevar: false }import/file1.js"这不管用。在file2.js中，somevar的值没有改变。如何更改file2.js中的值?
浏览 0提问于2017-11-29得票数 1
在我的Vuejs项目中，我有一些常见的js函数，可以通过多个组件来使用：├── index.html├── components│ └── ... ├── store.js # exports the store (with initial state and mutations)
└── actions.js # exports all act
浏览 3提问于2016-04-18得票数 11
回答已采纳
https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js <script src="{{ url (mix('/js/my-vuejs-component.js')
浏览 4提问于2019-11-20得票数 0
我必须从外部JavaScript文件调用Vue.js函数，但它不起作用。下面我给出了我尝试过的代码。 // external js file this.vm.displayData()var vm
浏览 32提问于2021-02-02得票数 0
回答已采纳
我刚接触Laravel和Vuejs，我有这个问题，我的系统加载非常慢，因为我使用外部css和js。我只有一个布局，我所有的外部css和js都是导入的。在运行时之前使用if else条件是防止加载未使用的外部css和js的好方法吗？下面是一个示例代码，其中这两个外部css仅在一个页面上运行
@if($_SERVER['REQUEST_URI']==='/dashboard/inventory'
浏览 16提问于2019-08-07得票数 1
回答已采纳
7回答
我有一个外部Java脚本文件something.js document.getElementById("demo").innerHTML="Hello WorldDashboard.vue <div>
<button type="button" name="button" @click="">Call External JS
浏览 0提问于2018-03-07得票数 22
回答已采纳
我已经创建了一个通过CDN使用VueJs的页面，并且正在尝试如何从外部JS文件循环数组中的数据。我尝试导入数据，如下所示，但在我的控制台中出现未定义的错误。"animal in animals"> </li>
</ul> 则此index.html末尾的JS如下； <script src="js/list.<e
浏览 27提问于2019-09-19得票数 0
我可以用外部下载器下载视频，或者简单地将URL拖到浏览器的下载部分。但无法通过JavaScript触发该活动。请帮帮我。
浏览 11提问于2022-10-27得票数 0
1回答
在VueJS中调用外部库函数
、、、、
基本上，我试图连接一个外部JS文件(用JS编写)，并试图使用它来调用它的函数。<script src="/static/medium-editor.min.js"></script>
name: 'App',
我也尝试过使用导入MediumEditor，但我认
浏览 3提问于2018-05-31得票数 1
目前，我正在使用Vue js增强我的Laravel应用程序。我想在jQuery DataTable中显示数据。请有人建议我怎么做，因为我是Vue js的新手。
浏览 17提问于2020-02-10得票数 0
回答已采纳
2回答
我运行通过springboot应用程序的静态资源托管的VueJs应用程序。public/index.html<html lang="fr"> <script src="<%= BASE_URL %&g
浏览 3提问于2019-01-09得票数 0
回答已采纳
5回答
我正在做一个需要使用js插件的项目。既然我们使用了vue，并且我们有了一个组件来处理基于插件的逻辑，我需要在vue组件中导入js插件文件，以便初始化插件。以前，这是在标记中处理的，如下所示："></script>import Vue from 'vue';
浏览 0提问于2018-01-24得票数 44
回答已采纳
在引入一些文本并单击按钮后，web应用程序将使用凭据调用API，该凭证应该是web用户或其浏览器不可见/不可访问的。这个外部API将把输入文本存储到它所连接的DB中。https://apidomain/service/login/{{username}/{{password}}是否有一种方法只使用前端框架(vue，react)或静态网站，而不必承载后端服务(执行外部我用vuejs 3成功地尝试了这一点，但是API调用是浏览器可见的。
浏览 3提问于2021-10-13得票数 0
我在我的VueJS 3应用程序中遇到了一个简单的导入问题。我正在将外部文件导入main.js：import * as myService from "./services/myService.js"; 然后也是在main.js中：app.provide("myService", myService); 然后在我的组件中我有： <script>
export如果我在main.js中调用var result = myS
浏览 46提问于2021-06-27得票数 0
我在我的Vue.js项目中使用了下面的DatePicker。我的代码如下所示 import Datepicker from 'vuejs-datepicker'; components: { Datepicker
浏览 30提问于2019-08-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
