-
2020-06-18 13:22:04
由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于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文件的方法
2020-10-15 04:57:31主要介绍了vue引入静态js文件的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下 -
vue 引入外部js静态文件
2021-12-30 17:54:28在一个组件内部需要引入一个js文件，如果放在index.html，每个组件都会有这个js，所以需要在组件内单独引入。 下载静态文件下来后，放入文件夹： 组件代码： <template> <div> <button @click=...展开全文在一个组件内部需要引入一个js文件，如果放在index.html，每个组件都会有这个js，所以需要在组件内单独引入。
下载静态文件下来后，放入文件夹：
组件代码：
<template> <div> <button @click="compressImage">点击调用方法</button> </div> </template> <script> import ImageCompressor from '@/assets/js/image-compressor.min' export default { data () { return { } }, methods: { compressImage () { new ImageCompressor() } } } </script>
-
vue 如何引入静态js资源，例如jquery之类的
2021-07-19 19:02:25静态js文件一般是存放在public目录下，为了结构明确，可以新建一个js文件夹，专门存放js文件，然后把需要引入的js文件放在该目录下，如图。 步骤二、引入js。 引入js文件必须在public下的index.html文件引入。...展开全文步骤一、存放js文件。
静态js文件一般是存放在public目录下，为了结构明确，可以新建一个js文件夹，专门存放js文件，然后把需要引入的js文件放在该目录下，如图。
步骤二、引入js。
引入js文件必须在public下的index.html文件引入。示范：
<script type="text/javascript" src="<%= BASE_URL %>js/jquery.3.2.1.min.js"></script>其中“<%= BASE_URL %>”取的是当前项目运行后的域名地址，以这样的格式引入才不会出现问题，网络资源的话就可以直接写链接了。
-
vue 引入静态js文件报错 139:18 error ‘XXX‘ is not defined no-undef
2021-11-19 15:34:43（需要注意的是在vue3.0版本后，静态引入的js文件需要放在public文件夹下，否则会报错Uncaught SyntaxError: Unexpected token '<'） 2、如何关闭Eslint检查。 方法1：vue脚手架创建工程的时候，不要选择Linter...展开全文1、出现这个报错的主要原因是，在创建项目的时候开启了Eslint检查，关掉就可以了。（需要注意的是在vue3.0版本后，静态引入的js文件需要放在public文件夹下，否则会报错Uncaught SyntaxError: Unexpected token '<'）
2、如何关闭Eslint检查。
方法1：vue脚手架创建工程的时候，不要选择Linter / Formatter选项（如何已经启用可以使用方法2和方法3）
方法2：如何我们已经启用了eslint，找到我们工程目录下的package.json，将‘devDependencies’中的依赖删掉（eslint、eslint-plugin-vue、@vue/cli-plugin-eslint这三个），然后执行npm install，然后重启服务，你会发现.eslintrc.js文件的作用已经失效。
方法3：通过vue.config.js 配置 lintOnSave：false（如果没有vue.config.js 文件直接在
package.json同级的文件夹下新建一个就行）配置代码如下module.exports = { devServer: { overlay: { warnings: false, //不显示警告 errors: false //不显示错误 } }, lintOnSave:false //关闭eslint检查 } vue.config.js文件配置完成后需要重启服务代码才会生效
-
如何在Vue引入静态图片?
2022-02-13 15:03:37本文介绍了在 Vue 项目中引入静态图片的两种方式, 即 require 和 import; 并给出了对应的使用方法, 可供大家参考; 另外也略微研究了一下这两种方式的区别和优劣, 不当之处, 请大家不吝指出. 原文地址: ... -
前端之vue引入静态资源、合并对象
2022-05-13 18:23:49引入静态资源vue引入静态资源一.放入public√二.放入src/assets内 vue引入静态资源 一.放入public√ 例如新建一个css文件夹, 放css样式, 在public/index.html内用link引入 二.放入src/assets内 例如新建一个css... -
vue在index.html中引入静态文件不生效问题及解决方法
2020-11-28 07:49:23第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static，这种的解决办法更改配置文件，把对应的... -
vue引入静态js文件(以引入adaPay.min.js文件为例)
2020-03-16 15:14:12vue引入静态js文件 注：附Adapay的SDK引入方法 废话不多说直接上代码 // 公众号可以，小程序不可以。公众号按照正常工具类引入即可。（文件路径一定要正确） import AdaPay from '@/js_sdk/adaPay/adaPay.min' 下图... -
vue 设置配置文件 引入静态js文件
2021-03-07 07:20:14由于一些演示，需要对编码名称等可快速进行修改，需要页面...vue-cli 3.0 的写法则是直接在public文件夹下创建js、具体操作如下：1、在public文件夹下创建env.js文件，里面文件的语法是es5，不允许使用浏览器不能兼... -
Vue引入静态图片的两种方式
2020-09-18 14:45:481.require形式引入 <template> <div style="margin:100px"> <div> <img :src="cat" // 图片src alt="猫咪"> </div> </div> </template> <script> export ... -
vue如何引入静态文件
2021-07-23 10:39:46We’re sorry but manager-demo doesn’t work properly without JavaScript enabled. Please enable it to continue. 正确的引入方式 在public文件夹下面新建一个static文件夹 一定要在public文件夹下面 在... -
Vue中引入静态资源的几种方式
2021-04-26 12:02:54最近修改一些老项目，好多组件里面引入图片的方式不太一样...Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理： 在 JavaScript 被导入或在 template/CSS 中被引用。 这类引用会被 webpack 处理。诸 -
vue 引入静态文件默认图片地址
2022-01-05 11:29:16<van-image class="user-avatar" round :src="avatarDefault" /> data () { return { avatarDefault: require('@/assets/image/avatar-default.png'), // 默认头像 ...关于静态资源放在 assets 还是 ... -
vue中引入html静态页面
2022-01-06 14:44:081、开始用的路由方式，首先在router文件夹index.js里面配置静态路由，代码如下 { path: '/help', component: () => import('@/page/help'), hidden: true, } //页面代码 <div class="top_help" @... -
vue-cli2.x项目优化之引入本地静态库文件的方法
2020-08-27 08:08:41主要介绍了vue-cli2.x项目优化之引入本地静态库文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 -
关于vue引入静态文件的相关配置和多大的文件转换为base64的相关配置记录
2022-02-16 08:36:10vue引入静态文件报错的问题 vue在引入静态文件（以pdf为例）会出现报错的问题，那是因为需要在vue.config.js里面进行一些相关webpack loader的配置 module:{ rules:[ { test:/\.pdf$/, use:[ { loader:'url-... -
vue-cli3.0引入静态js文件
2021-01-30 13:44:45由于一些演示，需要对编码名称等可快速进行修改，需要页面方便...vue-cli 3.0 的写法则是直接在public文件夹下创建js、具体操作如下：1、在public文件夹下创建config.js文件，里面文件的语法是es5，不允许使用浏览器... -
vue中引入mxGraph的步骤详解
2020-11-29 10:30:22第二步：新建一个index.js文件 文件内容如下 import mx from 'mxgraph'; const mxgraph = mx({ mxImageBasePath: './src/images', mxBasePath: './src' }); // decode bug ... -
vue 项目中引入本地静态的js
2020-12-06 15:11:44首先把你需要引入的js文件放在static文件夹下，我在statics文件夹下新建passW。 在index.html中引入passW下的jq文件，一下是代码 <script src=<%= BASE_URL %>/passW/jquery-2.1.4.min.js></script&...
