Vue批量全局引入js及对应方法

JavaScript024

Vue批量全局引入js及对应方法,第1张

在正确位置创建自己的js文件,比如src下创建一个utils.js文件

里面创建多个方法,比如:parseTime、getFileType

在 main.js 中引入,添加

在需要用到的组件中,果断抽出来遛一遛

let fileType = this.$utils.getFileType(this.fileUrl)

由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。

例如config.js定义了一个变量叫config,并在index.html页面引入后,那么在页面任何一处地方都可以直接使用。 

config.js:

index.html:

页面使用:

在开发环境中,我在public下创建了config.js文件,并且用export default方法进行导出。在页面使用的地方使用import config from XXX进入引入。开发过程中,没有出问题,但是在打包发布以后,发现修改config文件并不生效。

经过排查才意识到:不打包编译的js文件不识别es6语法,并且不应该使用import方法进行引入,应该按照原生的js文件进行使用。

原文地址: https://www.cnblogs.com/luoxuemei/p/11926472.html

1. 首先我们要改变我们要映入的外部js文件,改成以下这个格式。

代码:<pre class="html">function realconsole(){ alert("hello.thanks use me")} export { realconsole } </pre>

2. 到我们的寄主那里,我们需要导入仿造的文件,方法是这样的:

代码:<pre class="html">&lttemplate&gt&ltdiv class="teslist"&gt&ltbutton @click="methods1"&gt显示console&lt/button&gt&lt/div&gt&lt/template&gt&ltscript src="../../lib/myconsole.js"&gt&lt/script&gt&ltscript&gtimport { realconsole } from '../../lib/myconsole.js' export default { methods:{methods1:function(){ realconsole()} }} &lt/script&gt&ltstyle&gt.teslist { } &lt/style&gt</pre>

注意红色叉的部分,那是我们es5的写法,绿色才是正确的,下面是效果图