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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
js实现弹框效果
Mar 24 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
php目录管理函数小结
2008/09/10 PHP
php简单实现快速排序的方法
2015/04/04 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
nodejs教程之入门
2014/11/21 NodeJs
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
2014年大学生自我评价
2014/01/19 职场文书
库房保管员岗位职责
2014/04/07 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
怎样写辞职信
2015/02/27 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
初中班主任心得体会
2016/01/07 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android