华山资源网

vue引入静态js文件的方法
网络编程 2024/11/15 佚名
3 1

由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于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="/UploadFiles/2021-04-02/config.js">


页面使用：





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文件进行使用
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com