由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于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>

</html>

　　

页面使用：

 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文件的更多相关文章

  1. Vue中引入静态JS文件（爬坑）

    前言(背景介绍) 开发的项目需要与Threejs的3D项目结合在一起,需要静态引入,jquery.js,stats.js,three.js,ThreeBSP.js等静态文件.开发环境是iview-ad ...

  2. Vue引入远程JS文件

    问题 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库 ...

  3. vue页面引入外部js文件遇到的问题

    问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...

  4. vue组件内部引入远程js文件

    之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export def ...

  5. Django_博客项目 引入外部js文件内含模板语法无法正确获取值得说明和处理

    问题描述 : 项目中若存在对一段js代码复用多次的时候, 通常将此段代码移动到一个单独的静态文件中在被使用的地方利用 script 标签的 src 属性进行外部调用 但是如果此文件中存在使用 HTML ...

  6. 使用jQuery插件时避免重复引入jquery.js文件

    当一个页面使用多个jQuery插件时,需要避免重复引入jquery.js文件,因为后面映入的jQuery.js文件中定义的jQuery对象会覆盖掉前面的jQuery对象,导致之前定义的jQuery插件 ...

  7. Python+Django+js+echarts引入本地js文件的操作方法

    1. 选择正确的echarts.js,开发版选择echarts.baidu.com上的源码版,避免出现问题 2. 在项目主目录中新建static文件夹,里面建立js.css.images文件夹 3. ...

  8. 微信小程序从零开始开发步骤（七）引入外部js 文件

    上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内 ...

  9. 在vue的js文件引入自定义js文件

    自定义js var provinces=[] export default provinces vue页面js引入 import riskLeft from "./index.js" ...

随机推荐

  1. JS之理解继承

    JS之理解继承:https://segmentfault.com/a/1190000010468293 1.call继承,也叫借用构造函数.伪造对象或是经典继承.call继承回把父类的私有属性和方法继 ...

  2. [LeetCode] 30. 串联所有单词的子串

    题目链接: https://leetcode-cn.com/problems/substring-with-concatenation-of-all-words/ 题目描述: 给定一个字符串 s 和一 ...

  3. python中输入某年某月某日，判断这一天是这一年的第几天？

    输入某年某月某日,判断这一天是这一年的第几天?程序分析 特殊情况,闰年时需考虑二月多加一天: 直接上代码 #定义一个函数,判断是否为闰年 def leapyear(y): return (y % 40 ...

  4. python学习第五十三天configParser模块的使用

    configParser 模块用于生成和修改常见配置文档,python 3.x为configParser,配置软件的常见配置格式 模块的用法 import configparser config=co ...

  5. AXI总线协议

    AXI总线协议 (一).概述 AXI (高性能扩展总线接口,Advanced eXtensible Interface)是ARM AMBA 单片机总线系列中的一个协议,是计划用于高性能.高主频的系统设 ...

  6. 使用 ref 和 out 传递数组注意事项

    1.与所有的 out参数一样,在使用数组类型的 out 参数前必须先为其赋值,即必须由被调用方为其赋值 示例 :在此例中,在调用方(Main 方法)中声明数组 theArray,并在 FillArra ...

  7. 通过修改host解决VS2019下载极慢的问题

    原文:通过修改host解决VS2019下载极慢的问题 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn ...

  8. oracle数据库中的存储函数

    oracle中的存储函数,和系统内的函数类似,可以像调用系统函数一样调用存储函数.它与存储过程的唯一区别就是存储过程没有return返回值,存储函数可以与存储过程互换,存储函数可以在存储过程中调用. ...

  9. class path resource [applicationContext.xml] cannot be opened because it does not exis

    使用maven创建web工程,将spring配置文件applicationContext.xml放在src/resource下,用eclipse编译时提示class path resource [ap ...

  10. 以当前时间作为GUID的方法

    在C#中,系统提供了GUID类,用户可以通过该类来获得128位的唯一标识,但是该标识不具有可读性,很难把该GUID显示在界面上,以当前时间精确到毫秒来作为GUID是一个比较不错的做法,但是DateTi ...