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 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
Node学习记录之cluster模块
May 31 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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 curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
采购部岗位职责
2013/11/24 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
同志主要表现材料
2014/08/21 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
北京英文导游词
2015/02/12 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
庆祝教师节主持词
2015/07/06 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python