精华内容
下载资源
问答
  • 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文件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 在一个组件内部需要引入一个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>
    
    展开全文
  • 静态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 %>”取的是当前项目运行后的域名地址,以这样的格式引入才不会出现问题,网络资源的话就可以直接写链接了。

    展开全文
  • (需要注意的是在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引入静态资源一.放入public√二.放入src/assets内 vue引入静态资源 一.放入public√ 例如新建一个css文件夹, 放css样式, 在public/index.html内用link引入 二.放入src/assets内 例如新建一个css...
  • 第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的...
  • vue引入静态js文件 注:附Adapay的SDK引入方法 废话不多说直接上代码 // 公众号可以,小程序不可以。公众号按照正常工具类引入即可。(文件路径一定要正确) import AdaPay from '@/js_sdk/adaPay/adaPay.min' 下图...
  • 由于一些演示,需要对编码名称等可快速进行修改,需要页面...vue-cli 3.0 的写法则是直接在public文件夹下创建js、具体操作如下:1、在public文件夹下创建env.js文件,里面文件的语法是es5,不允许使用浏览器不能兼...
  • Vue引入静态图片的两种方式

    千次阅读 2020-09-18 14:45:48
    1.require形式引入 <template> <div style="margin:100px"> <div> <img :src="cat" // 图片src alt="猫咪"> </div> </div> </template> <script> export ...
  • vue如何引入静态文件

    2021-07-23 10:39:46
    We’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 处理。诸
  • <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:08
    1、开始用的路由方式,首先在router文件夹index.js里面配置静态路由,代码如下 { path: '/help', component: () => import('@/page/help'), hidden: true, } //页面代码 <div class="top_help" @...
  • 主要介绍了vue-cli2.x项目优化之引入本地静态库文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue引入静态文件报错的问题 vue在引入静态文件(以pdf为例)会出现报错的问题,那是因为需要在vue.config.js里面进行一些相关webpack loader的配置 module:{ rules:[ { test:/\.pdf$/, use:[ { loader:'url-...
  • 由于一些演示,需要对编码名称等可快速进行修改,需要页面方便...vue-cli 3.0 的写法则是直接在public文件夹下创建js、具体操作如下:1、在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器...
  • 第二步:新建一个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&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,994
精华内容 11,197
关键字:

vue引入静态js