vue引入静态js文件的方法


Posted in Javascript onJune 20, 2020

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

vue-cli 2.0的作法是在static文件下创建js。vue-cli 3.0 的写法则是直接在public文件夹下创建js、

具体操作如下:

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

2.、在html文件下,使用<scrtipt>标签进入

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

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

 

config.js

/*自定义全局变量,此文件不编译,因此需要用原生的写法*/
let config = {
 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-01 00:00:00",max:‘‘} // max为当天时间:23:59:59
  ],
 }
}

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= webpackConfig.name %></title>
 </head>
 <body>
  <div id="app"></div>
 </body>
 <script src="./config.js" type="text/javascript"></script>

页面使用:

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

个人错误记录:

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

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

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

Javascript 相关文章推荐
五个jQuery图片画廊插件 推荐
May 12 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
浅析javascript的return语句
Dec 15 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
详解Vue之计算属性
Jun 20 #Javascript
微信小程序实现多图上传
Jun 19 #Javascript
小程序表单认证布局及验证详解
Jun 19 #Javascript
小程序实现背景音乐播放和暂停
Jun 19 #Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 #Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 #Javascript
小程序实现多个选项卡切换
Jun 19 #Javascript
You might like
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
模仿OSO的论坛(五)
2006/10/09 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php微信开发之上传临时素材
2016/06/24 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
jquery easyui使用心得
2014/07/07 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python实现的特征提取操作示例
2018/12/03 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
如何写好自荐信
2014/04/07 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
学习十八大标语
2014/10/09 职场文书
2015年春节标语口号
2014/12/09 职场文书
档案接收函格式
2015/01/30 职场文书
2015年团支部工作总结
2015/04/03 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS