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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
vue+element实现打印页面功能
May 20 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php adodb操作mysql数据库
2009/03/19 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
layui实现数据分页功能
2019/07/27 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
自主招生自荐信
2013/12/08 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python