vue文件中引入js_vue中require引入js

vue文件中引入js_vue中require引入js由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。vue-cli2.0的作法是在static文件下创建js。vue-cli3.0的写法则是直接在public文件夹下创建js、具体操作如下:1、在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

vue文件中引入js_vue中require引入js

由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。

vue-cli 2.0的作法是在static文件下创建js。vue-cli 3.0 的写法则是直接在public文件夹下创建js、

具体操作如下:

1、在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器不能兼容的es6语法。因为该文件不进行编译,es6部分语法浏览器不兼容。

2.、在html文件下,使用标签进入

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

页面使用:

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文件内容请搜索云海天教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持云海天教程!

原文链接:https://blog.csdn.net/z591102/article/details/106832204

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184472.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • idea修改java版本_软件项目版本管理

    idea修改java版本_软件项目版本管理Maven构建HibernateDemo时运行报错,版本问题。Hibernate5要用jdk1.8。下载了jdk1.8安装好。不用配置环境变量。File>>ProjectStructure找到你的jdk位置然后再选择Project,修改对应项目的jdk版本。

  • vue监听点击事件_vue reload

    vue监听点击事件_vue reload运用的知识点:JavaScript的onbeforeunload函数使用方法window.onbeforeunload=function(){  return‘’;}注意:有返回值(”,true,false…都可以)才能弹出显示,或者有需要执行的事件也行。onload、onunload、onbeforeunload的执行问题:页面加载…

    2022年10月16日
  • 联想笔记本电脑键盘灯在哪里开_笔记本自带键盘没反应

    联想笔记本电脑键盘灯在哪里开_笔记本自带键盘没反应在联想系列笔记本电脑中,有一个键盘等功能,它们不仅可以看起来很酷,而且可以在光线相对较低时打开键盘灯,以便我们可以清楚地看到键盘上的按键,但是许多用户我不知道如何打开联想的键盘灯。实际上,有些快捷键可以快速打开。让我们与您分享在联想笔记本电脑键盘上按哪个键。具体步骤如下:1、某些Lenovo笔记本电脑型号具有键盘背光功能,可以通过“FN+Space”将其打开。对于支持此功能的Zhi型号,在d…

  • TensorFlow2.0安装_tensorflow中run

    TensorFlow2.0安装_tensorflow中runTensorflow2.4.1前言Tensorflow简介Anaconda简介Anaconda安装TensorFlowCPU&GPUTensorflow安装Pycharm&TensorflowTensorflow&HelloworldHelloworldSession()后序前言目前考虑进入梦寐以求的机器学习、人工智能等领域的学习,因此安装主流的机器学习框架Tensorflow迫在眉睫。然而网上的网上安装教程大多是1.xx版本的。目前安装的环境

  • Lnmp修改php.ini配置

    Lnmp修改php.ini配置

  • 什么是通配符掩码

    什么是通配符掩码通配符掩码(WildcardMask)—通配符掩码(WildcardMask)是一个32位的数量,用在与一个IP地址的联合上来决定在一个IP地址的那个位应该不忽略,在将那个地址与另一个IP地址相比时。一个通配符掩码在设置接入列表时被指定。路由器使用的通配符掩码(或者称作反掩码)与源或目标地址一起来分辨匹配的地址范围,它跟子网掩码刚好相反。它像子网掩码告…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号