首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

来自public/index.html的外部javascript未加载到Vue组件中

问题描述:来自public/index.html的外部javascript未加载到Vue组件中。

回答: 在Vue开发中,通常我们会将JavaScript代码写在Vue组件中,以便在组件加载时自动执行。但有时候我们可能需要引入来自public/index.html的外部JavaScript文件,并在Vue组件中使用它。如果外部JavaScript未加载到Vue组件中,可能是由于以下几个原因:

  1. 引入路径错误:请确保在Vue组件中正确引入外部JavaScript文件。可以使用相对路径或绝对路径来引入文件。例如,如果外部JavaScript文件位于public目录下的js文件夹中,可以使用以下方式引入:
代码语言:txt
复制
import '@/js/external.js';
  1. 异步加载问题:如果外部JavaScript文件是通过异步方式加载的,可能会导致加载顺序的问题。在Vue组件中,可以使用Vue的生命周期钩子函数来确保外部JavaScript文件在组件加载完成后再执行。例如,在mounted钩子函数中引入外部JavaScript文件:
代码语言:txt
复制
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = '@/js/external.js';
    document.body.appendChild(script);
  },
};
  1. Vue CLI配置问题:如果使用Vue CLI进行项目开发,可能需要在配置文件中进行相关配置。请确保在vue.config.js或webpack.config.js中正确配置外部JavaScript文件的加载方式。

总结: 确保正确引入外部JavaScript文件,并在Vue组件中使用合适的方式加载和执行。如果问题仍然存在,可以检查路径、加载顺序和配置文件等方面的问题。对于Vue开发中的问题,可以参考腾讯云提供的Vue.js文档和相关教程进行学习和解决。腾讯云也提供了云原生、服务器运维、网络安全等相关产品,可以根据具体需求选择适合的产品进行部署和管理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何在vue组件引入外部css和js文件

在使用vue框架开发时,我们都知道一个组件可以同时写HTML、css、js代码,只需三个标签而已,如下: 但是要真把所有的代码都写入一个组件文件当中,那么代码量是非常大...,极不便于修改和维护,这时就需要把css样式和js代码写到其他文件下,再引入组件当中。...具体方法如下: 在组件引入css文件: @import url(css文件路径) 在组件引入js文件: 首先需要将我们js模块“抛出”,让其他文件能获取到...;如下, function home() { console.log("我是js文件") } export { home } 其次在需要导入文件导入; ...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

8.7K20

懂个锤子Vue 项目工程化

JavaScript 快速入门Vue.js 是一个渐进式 JavaScript 框架,适用于构建用户界面:它设计理念是可以逐步采用,既可以作为一个库用于现有项目,也可以用于构建复杂单页应用;核心包传统开发模式...)项目目录介绍和运行流程:node_modules/ # 存放项目的第三方依赖包public/ # 存放外部静态文件 ├── favicon.ioc...打开,不要一个文件夹存放多个项目,实在是不方便管理,index.html位置: public/index.html 这是项目的入口 HTML 文件,所有的 Vue 组件最终都会被挂载到这个文件一个...$mount('#app'); //挂载至 index.html vue容器为什么这里挂载是 new Vue({})....App.vue,包含模板、脚本和样式,它被挂载到 index.html DOM 元素上;它作用类似于 HTML 文档 标签,必须存在,且是其他所有组件组件;全局状态管理: 根组件通常会引入全局状态管理如

9310
  • vue3 Teleport瞬移组件

    6、 vue3 Teleport瞬移组件 Teleport一般被翻译成瞬间移动组件,实际上是不好理解.我把他理解成"独立组件", 将组件 DOM 元素挂载在任意指定一个 DOM 元素,与 React...他可以那你写组件载到任何你想挂载DOM上,所以是很自由很独立 编写一个例子 // HelloWorld.vue Hello World</... DOM节点之下,父节点dom结构和css都会给hello-world组件产生影响 于是产生问题 hello-world组件被包裹在其它组件之中,容易被干扰 样式也在其它组件,容易变得非常混乱...Teleport 可以把hello-world组件渲染到任意你想渲染外部Dom上,不必嵌套在#app,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你组件传送到任何地方 使用时候...文件夹下index.html增加一个节点 <!

    40730

    【融职培训】Web前端学习 第7章 Vue基础教程2 创建Vue项目

    二、项目目录结构 创建项目目录结构如下所示: ├─hello │ ├─node_modules │ ├─public │ │ ├─favicon.ico │ │ ├─index.html...以vue为后缀文件是vue单文件组件,我们在开发vue应用过程,主要任务就是去编写这些以vue为后缀文件。...$mount('#app') render方法createElement可以根据组件生成DOM节点,这样,就成功地将单文件组件App.vue载到index.html中了。...script标签添加JavaScript代码 style标签添加是CSS样式。 默认情况下,vscode编辑器不能高亮显示.vue文件,需要安装vetur插件。...,用模块化语法export default将组件示例暴露给外部

    35010

    干货 | vue-router与创建登录组件

    vue-router 在使用vue-router时,我们需要做就是把路由映射到各个组件vue-router会把各个组件渲染到正确地方。...// 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配元素上。router.start(App, '#app') 以上均来自官方文档,且提供了一个在线实例应用。...我们主要页面逻辑如下: · 1.登录页面,输入账号和密码即可 · 2.模块页面 2 index.html主页面 index.html主页面添加用于渲染匹配组件,如下: <div id="app...// 路由器会创建一个 App 实例,并且挂<em>载到</em>选择符 #app 匹配<em>的</em>元素上。...,可使用this.xxx直接获取 · 此处引用了Bootstrap<em>的</em>样式,在<em>index.html</em><em>中</em>添加   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com

    1.3K10

    Vue前端篇——项目目录结构介绍

    下面就是vue3工程结构目录解释图:如果创建工程使用ES,会有包含ES配置,如图:主要需要注意时候,入口是index.html,从入口出发,index包含main.ts文件,main.ts再到跟组件...**src/**:源代码目录,存放 Vue 组件JavaScript 文件、样式文件等。2. src 目录src 目录是 Vue 3 项目的核心部分,它包含了项目的所有源代码。...以下是 src 目录下主要文件和文件夹:**main.js** 或 **main.ts**:项目的入口文件,负责创建 Vue 应用实例并挂载到 DOM 上。...**App.vue**:项目的根组件,通常作为其他组件容器。**components/**:存放 Vue 组件文件夹,按照功能或模块进行划分。...3. public 目录public 目录用于存放静态资源,这些资源在构建过程不会被处理。例如,可以在这个目录下放置 logo 图片、favicon.ico 等。4.

    1.3K10

    详细介绍 Vue3 常见目录结构

    它具有以下常见目录:├── public/│ ├── index.html│ └── favicon.ico├── src/│ ├── assets/│ ├── components/...public/public 目录存放了与业务逻辑无关静态资源,例如 index.html、favicon.ico 等。index.html 是应用程序入口文件,它被打包后生成到生产环境。...每个页面通常由一个 .vue 文件组成,并且通过路由进行导航。App.vue 是应用程序组件,它包含了应用程序整体布局和结构。您可以在此文件定义全局样式和全局组件。...使用单文件组件Vue3 推崇使用单文件组件方式编写代码。将 HTML、CSS 和 JavaScript 代码放在同一个文件,可以更好地组织和复用代码。...合理使用公共组件:将通用 UI 组件、布局组件等放在 components/ 目录,并尽量通过组件方式进行开发,以提高代码可复用性。

    1.4K20

    Vue 项目优化(最终输出方向)

    背景 我们有一个微信小程序,在迭代过程,为了赶进度,最初里面大部分页面都是利用 web-view 组件嵌套h5站点来实现;h5站点,就是利用vue-cli官方那一套搭建单页面应用;随着项目的推进...public/index.html(埋下了坑) 分析依赖 -> chunk-vendor.js 过大 项目中,我们主要用到了第三方库有 vue、echarts、tim-js-sdk、js-cookies...可以看出,只有在生产环境,我们才会启用 externals 配置,原因是:公司网络不好,外部js引入老是超时 异步引入组件 异步组件,可以看我这篇文章 Vue 异步组件和动态组件(2.x) 一些非首屏需要用到...,其实埋下了一个不小坑; 由于 public/index.html 是所有入口文件公共页面,在我们把许多第三方库用 configureWebpack.externals 配置项,从chunk-vendor.js...拆出,放入 public/index.html 异步引入过程,没有考虑到很多页面其实用不上这些库,但也引入了,造成了不小问题; 最后调整配置,只把所有页面都需要第三方包,才放入 configureWebpack.externals

    1.4K40

    Vue CLI 3搭建vue+vuex 最全分析

    vue cli 3 “静态资源”两种处理方式: 经webpack 处理:在 JavaScript 被导入或在 template/CSS 通过“相对路径”被引用资源会被编译并压缩 不经webpack...处理:放置在 public 目录下或通过绝对路径被引用资源将会“直接被拷贝”一份,不做任何编译压缩处理 ④ index.htmlvue cli 2 :“index.htmlvue...cli 3 :“public/index.html ”此模板会被 html-webpack-plugin 处理 ⑤ src/views: vue cli 3 src文件夹 新增 views文件夹...用来存放 “页面”,区分 components(组件) ⑥ 去掉 build(根据config配置来定义规则)、config(配置不同环境参数)文件夹 : vue cli 3 ,这些配置 你可以通过...'src/index/main.js',// page 入口,每个“page”应该有一个对应 JavaScript 入口文件 template: 'public/index.html

    67710

    Vue.js渐进式JavaScript框架

    然后创建vueDemo,把vue.js文件复制进入。 ​ ? 创建一个index.html文件,以后可以用.vue文件。 ​ ?...比如说要设置数据监听,编译模板,将实例挂载到Dom结构,并且在数据变化时更新Dom等等。 在这些过程,运行一些为生命周期钩子函数,给我们有了添加代码机会。...errorCaptured是去捕获来自组件一个错误时候被调用,它可以去捕获子组件错误。 模板语法 vue.js使用了基于HTML额模板语法,允许开发者声明地将dom绑定到底层vue实例数据。...使用v-on指令监听dom事件,并在触发时运行一些JavaScript代码。 ​ v-pre,v-cloak,v-once v-pre可以在模板跳过vue编译,直接输出原始值。 ​ ?...vue.js支持我们在模块系统局部注册,在这种情况下,推荐创建一个components目录,并将每个组件放置在其各自文件

    2.2K20

    如何使用Vue.js和Axios来显示API数据

    第1步 - 创建一个基本VUE应用程序 我们来创建一个基本Vue应用程序。 我们将构建一个带有一些模拟数据HTML页面,我们最终将用来自API实时数据替换它们。...我们将使用Vue.js来显示这个模拟数据。 对于第一步,我们将所有代码保存在一个文件。 使用文本编辑器创建一个名为index.html新文件。...这将使我们应用程序更易于维护。 我们将把这两个文件保存在同一个目录。 首先,修改index.html文件并删除JavaScript代码,将其替换为vueApp.js文件链接。...在这个新文件,放置原来位于index.html文件相同JavaScript代码,而不使用标记: vueApp.js const vm = new Vue({ el:...一旦Vue应用程序被挂载到一个元素, mounted函数就会被调用。 一旦Vue应用程序被挂载,我们将向API发出请求并保存结果。 网页将被通知更改并且值将出现在页面上。

    8.8K20

    最新版教学Vue.js渐进式JavaScript框架

    然后创建vueDemo,把vue.js文件复制进入。 创建一个index.html文件,以后可以用.vue文件。...比如说要设置数据监听,编译模板,将实例挂载到Dom结构,并且在数据变化时更新Dom等等。 在这些过程,运行一些为生命周期钩子函数,给我们有了添加代码机会。...errorCaptured是去捕获来自组件一个错误时候被调用,它可以去捕获子组件错误。 模板语法 vue.js使用了基于HTML额模板语法,允许开发者声明地将dom绑定到底层vue实例数据。...使用v-on指令监听dom事件,并在触发时运行一些JavaScript代码。 v-pre,v-cloak,v-once v-pre可以在模板跳过vue编译,直接输出原始值。...,驼峰式: 父子组件代码如下: vue.js支持我们在模块系统局部注册,在这种情况下,推荐创建一个components目录,并将每个组件放置在其各自文件

    4.2K20

    爬虫+反爬虫+js代码混淆

    创建是data和method onBeforeMount() : 组件载到节点上之前执行函数。 onMounted() : 组件挂载完成后执行函数。...然后我们在login方法编写登陆事件 另外:context 是一个普通 JavaScript 对象,也就是说,它不是响应式,这意味着你可以安全地对 context 使用 ES6 解构 setup....我把他理解成”独立组件”, 他可以从你写组件载到任何你想挂载DOM上,所以是很自由很独立 以一个例子来看:编写一个弹窗组件 ...; Teleport 可以把modal组件渲染到任意你想渲染外部Dom上,不必嵌套在#app,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你组件传送到任何地方 使用时候 to属性可以确定想要挂载...文件夹下index.html增加一个节点 <!

    5.5K20
    领券