添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

Vue项目中如何引入外部js文件,并使用其中定义的函数

一些常用的功能函数,我们希望将其封装起来放入一个外部JS文件中,好方便我们在需要的时候使用。vue可以使用import指令引入外部文件,但是作为新手,在使用过程中难免会导致很多错误,这里就将我遇到的一些问题做一下总结

编写外部js文件

这个比较简单,就正常将我们需要使用的功能函数安装js格式写入js文件即可
需要注意的是,当我们希望在vue项目中使用其中的函数时,我们需要在js文件中将我们的功能函数用export抛出,下面是一个简单的案列:

function  sayMsg(msg){
	console.log(msg);
export {			//关键
	sayMsg

VUE中引入外部js

使用import from引入你写好的js文件,这个时候需要注意import后面跟的是我们需要使用的函数,必须放在{ }中,不放在{ }内会提示找不到该函数。函数名字必须和你在js文件中定义和export{}抛出的名字一致。

import {sayMsg}  from '../../common/sayMsg.js'

如何使用该函数

前面我们已将sayMsg函数从js文件中导入vue项目中,这个时候使用它直接调用即可,像下面这样:(函数前面不需要加this,通常在vue项目中定义的函数在调用时要在前面加上this,但是这里不需要,加上会报错)

sayMsg('Hello World!');
  1. 一个就是在js文件中没有用export{}抛出函数
  2. 在引用时没有使用{}将函数名括起来
  3. 在使用的时候在前面加上了this
Vue项目中如何引入外部js文件,并使用其中定义的函数一些常用的功能函数,我们希望将其封装起来放入一个外部JS文件中,好方便我们在需要的时候使用。vue可以使用import指令引入外部文件,但是作为新手,在使用过程中难免会导致很多错误,这里就将我遇到的一些问题做一下总结编写外部js文件这个比较简单,就正常将我们需要使用的功能函数安装js格式写入js文件即可需要注意的是,当我们希望在vue项...
之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位。如果放在index.html,这样每个组件都会有这个js。所以需要在组件内单独引入。 第一种操作 Dom引入js: export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); 第二种使用 createElement 方法: export default
Vue引入某个组件时,在Vue单页面找不到组件注册时,这个时候该考虑组件是否在Vue里 的html页面里是否是用 <script></script>标签引入的第三方JS文件 <script src=http://xingcuan.com/he/we-sitemap/master/sitemap.0.1.js></script> 引入功能正常后,可能浏览器控制台会报类似于: sitemap.0.1.js:1 Un..
在普通的项目,我们可以通过来引入外部js文件,但是在Vue项目,就不可以使用这种方式了,需要使用ES6语法来引入,同时还要对已有的js文件做相应的修改。 一般情况下,我们引入外部js文件,是要调用js文件函数。在Vue项目,我们首先要使用export命令将这个函数抛出,然后才能在其他的Vue组件使用import命令引入。同时还要注意外部js脚本的存放位置,不能放在components...
1、“   npm install jquery --save    ” 命令安装jquery 2、在项目根目录下的 build 目录下找到webpack.base.conf.js 文件,在开头使用以下代码引入webpack,如下 var webpack = require('webpack') 3、在webpack.base.conf.js 配置文...
1、出现这个报错的主要原因是,在创建项目的时候开启了Eslint检查,关掉就可以了。(需要注意的是在vue3.0版本后,静态引入js文件需要放在public文件夹下,否则会报错Uncaught SyntaxError: Unexpected token '<') 2、如何关闭Eslint检查。 方法1:vue脚手架创建工程的时候,不要选择Linter / Formatter选项(如何已经启用可以使用方法2和方法3) 方法2:如何我们已经启用了eslint,找到我们工程目录下的package..
很久没更新博客了,最近在项目遇到了这么一个问题,需要在Vue项目引入原生的js;也需要在原生的js调用vue组件的函数。 一、Vue引入原生未封装js 一般情况下对于已封装的js文件,只需要import该js,然后直接使用即可,但是问题就出现在该js未封装。 最终的解决办法,将该js引入到index.html,然后在需要的地方直接使用即可,无需再次引入。 <!--加载第三方未封装的js--> <script src="./js/test.js"></scr
Vue项目的开发过程,我们可能需要在vue.config.js使用一些外部js文件的变量。这个过程有些麻烦,但是我们可以通过一些方法来解决它。 第一种方法是在vue.config.js直接引入变量所在的js文件。这个过程需要使用Node.js的fs模块读取文件并且解析出变量。在读取js文件之后,我们将其转换为字符串,然后使用eval()函数解析其内容并获取变量的值。 第二种方法是将变量存储在一个环境变量,然后在vue.config.js使用这个环境变量。在项目的根目录创建.env文件,并在其定义变量。例如,在.env文件定义一个名为VAR的变量:VAR=value。然后在vue.config.js,我们可以使用process.env.VAR来获取变量的值。 第三种方法是在webpack添加一个plugin,在vue.config.js访问该plugin。具体地,我们可以编写一个名为VariablePlugin的plugin,其作用是在编译过程将变量注入到代码。在vue.config.js可以使用此变量。 需要注意的是,在使用这些方法时,我们需要小心处理变量的作用域和类型。如果变量定义在一个函数,我们需要确保在vue.config.js可以访问到它。并且在使用变量时,需要考虑到它的类型和值的安全性,避免注入攻击或其他安全问题。 总的来说,在vue.config.js使用外部js文件的变量是一个需要小心思考和处理的问题。我们需要选择适合我们项目的解决方案,并且保证在实际使用不会出现任何问题。