vue引入静态js文件

由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于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.mobileObject.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_vue引入静态js文件的方法
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...
vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
vue引入全局静态变量_vue-cli3.0引入静态js文件
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...
vue引入外部js文件（第三方js工具或者jq库）
方法一:静态资源导入(或者cdn资源加载) 在public文件夹下的index.html文件使用script标签对插件进行引用. 可以是项目中的静态资源,也可以是远程资源. 例如: //本地静态资源, ...
vue引入第三方js文件
1.把js文件放入静态文件文件夹(static)下: 2.修改build>webpack.base.conf.js文件在resolve.alias添加需要的js文件 3.在需要的页面引入
vue引用自定义.js文件（常量抛出 + 地址三级联动为例）- 语法篇
文章目录 vue如何引用`自定义封装的` `.js`文件? `如何操作,详细如下.`(注意代码注释部分:注意1/2/3/4/5) 一.效果图预览: 二.以自定义`area.min.js`文件为例: 三 ...
vue引入第三方js的方案报错
vue引入第三方js的方案报错< 问题描述 vue项目中引用一个外部js包 npm中没有响应的js下载所以只能通过外部引用使用方法如下: 1.首先是第三方js包存放的位置一定要放在 st ...
jsp中引入外部js文件发生中文乱码
jsp中引入外部js文件发生中文乱码前言排查解决问题前言我在写作业时发现自己的作业出现中文乱码排查我先检查了一番根据F12找到了span标签的id,在编译器中进行搜索找到找到了语句的所 ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...

vue引入静态js文件

vue引入静态js文件相关推荐

最新文章

热门文章