微客导航 » 文章资讯 » vue引入静态js文件的方法

vue引入静态js文件的方法

2023-07-22 18:03:05 176

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

vue-cli2.0的作法是在static文件下创建js。vue-cli3.0的写法则是直接在public文件夹下创建js、

具体操作如下：

1、在public文件夹下创建config.js文件，里面文件的语法是es5，不允许使用浏览器不能兼容的es6语法。因为该文件不进行编译，es6部分语法浏览器不兼容。

2.、在html文件下，使用标签进入

3、在页面直接按照原生的方法使用即可。

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

config.js

/*自定义全局变量，此文件不编译，因此需要用原生的写法*/
letconfig={
networkGuard:{
accountDBID:‘9E54B0CA55E447148211ACEA6F911FBC‘,//账号表，网警数据-身份证账号关联
countDBQry:[//账号表搜索条件，需要和数据表的搜索条件进行关联
{fieldCode:"account",fieldName:"账号",searchRule:"LK",javaType:"varchar",similar:0,fieldValue:‘‘},//fieldValue需要页面输入赋值查询
{fieldCode:"update_time",fieldName:"更新时间",searchRule:"BET",javaType:"datetime",similar:0,min:"2017-01-0100:00:00",max:‘‘}//max为当天时间：23:59:59
],
}
}

index.html







favicon.ico">
<%=webpackConfig.name%>

页面使用：

queryFun(){
if(!this.mobile){
returnfalse
}
//验证表达式不是电话号码不给进入
constreg=/^[1][3,4,5,7,8][0-9]{9}$/
if(!reg.test(this.mobile)){
this.$message({showClose:true,message:‘请输入正确的手机号码！‘,type:‘warning‘})
returnfalse
}
config.networkGuard.countDBQry[0].fieldValue=this.mobile
Object.assign(this.listQuery,{
dataBaseId:config.networkGuard.accountDBID,
params:config.networkGuard.countDBQry
})
……

个人错误记录：

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

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

到此这篇关于vue引入静态js文件的方法的文章就介绍到这了,更多相关vue引入静态js文件内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue引入静态js文件的方法

热门推荐

随机推荐