精华内容
下载资源
问答
  • Vue引入静态资源的几种方式
    千次阅读
    2021-04-26 12:02:54

    最近修改一些老项目,好多组件里面引入图片的方式不太一样,总感觉自己没有好好总结过,今天有时间参考了几篇帖子,就总结一下;

    在总结之前看了一下vue-cli的文档,突然感觉之前可能是我忽略它了基本没有看过,官方文档这块写的清清楚楚,还是应该多看文档,天天看掘金、简书这些碎片化知识也不太好;

    Vue中静态资源引入机制


    Vue.js关于静态资源的官方文档

    静态资源可以通过两种方式进行处理:

    1. 在 JavaScript 被导入或在 template/CSS 中被引用。
      这类引用会被 webpack 处理。诸如<img src="...">background: url(...)CSS @import的资源, 都会被解析为一个模块依赖。
      例如,url(./image.png)会被翻译为require(’./image.png’)

    2. 放置在public目录下或通过绝对路径被引用。
      这类资源将会直接被拷贝,而不会经过 webpack 的处理,你需要通过绝对路径来引用它们。

    webpack中的require解析

    首先明确一点,在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴,而进入index.js后,加载的组件中的require都属于webpack的解析范畴。

    先聊聊webpack中require的用法。

    // 代码1 报错
    let url = "@/assets/images/carousel/logo.svg"
    require(url)    // require单纯传了一个变量
    
    // 代码2 正确
    let url = "logo.svg"
    require("@/assets/images/carousel/"+url); // require里面虽然是变量但是增加了前缀,让计算机更快找到
    

    页面修改webpack流程:

    webpack进行编译
    等待编译完
    进行工程打包
    打包正确
    热加载运行
    刷新页面

    如果require中传入的是个变量,它有可能是计算机系统中的任何目录下的任何文件,那么在打包静态资源时它有可能会将你的电脑整个磁盘遍历一遍(它很傻); 如上代码1只传了个变量。
    因此需要给出在大致路径(如上代码2),这样才能精确的将那个路径下的对应文件打包,然后在代码运行时,直接用对应文件名生成正则匹配(因为打包后的文件,可能有hash值。不能直接查文件名),找到后,加载到代码中。所以,尽可能详细的指定require中的路径,然后拼接变量。

    webpack将项目中的静态资源编译打包后,生成的路径已经不是原来的那个路径了。

    src/assets/image/logo.png
    // 编译后可能变成 
    dist/public/image/logo.1d997ea3.png
    
    通过require("src/assets/image/logo.png"),
    会自动找到并加载 dist/public/image/logo.1d997ea3.png文件
    

    关于打包完不是原来的路径那是 file-loader 的作用,这里不细说可以看一下,file-loader和url-loader的讲解。

    解析介绍

    这里主要用到 vue-loader,vue-loader 在编译单文件组件中的 块时,它也会将所有遇到的资源 URL 转换为 webpack 模块请求。(这样我们就没必要手动调用require了,而是交给vue-loader处理了)
    vue-loader默认可以处理的标签/特性的组合如下: (不包括style)

    // 面对下面的标签组合,vue-loader会自动进行资源url的转换。
    {
      video: ['src', 'poster'],
      img: 'src',   //即img元素上的src属性
      source: 'src',  //source元素上的src属性
      image: 'xlink:href'
    }
    

    转换规则(官方文档有介绍)

    部分的路径处理

    1. 如果路径是绝对路径,会被原样保留。如 /src/assets/image/login/title.png
    //代码
    <template>
       <img src="/src/assets/image/login/title.png" alt="">
    </template>
    
    //渲染后html页面
    <img data-v-70c98a68="" src="/src/assets/image/login/title.png" alt="">
    // 当然这个图片是无法展示的,因为编译后title.png已不在src/assets/image/login下了 
    

    这个图片是无法展示的,因为编译后title.png已不在src/assets/image/login下了 ,关于public文件夹在下文会有介绍

    1. 如果路径以 . 开头,将会被看作相对的模块依赖。如 ./title.png
    //代码
    <img src="./titlea.png" alt="">
    
    //渲染后html页面
    <img data-v-70c98a68="" src="/static/img/titlea.1e9fa570.png" alt="">
    

    ❌错误的引入方式,使用 :src 调用了 v-bind 指令处理其内容,相对路径不会被webpack的 file-loader 处理。

    <img :src="'./assets/images/02.jpg'" alt=""> // ×
    // 编译后:
    <img src="./assets/images/02.jpg" alt="">
    
    1. 如果路径以 @ 开头,也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias,这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src
    //代码
    <img src="@/assets/image/login/title.png" alt="">
    
    //渲染后html页面
    <img data-v-70c98a68="" src="/static/img/title.1e9fa570.png" alt="">
    
    1. 如果路径以 ~ 开头,其后的部分将会被看作模块依赖,既可以加载含有别名的静态资源,又可以加载node-modules中的资源。如
    // 如果用别名的静态资源必须加@否则报一下错误。
    //代码 必须有@否则报错,@是别名
    <img src="~@/assets/image/login/title.png" alt="">
    //渲染后html页面
    <img data-v-70c98a68="" src="/static/img/title.1e9fa570.png" alt="">
    
    
    //代码
    <img src="~[npm包名]/xxx/logo.png" alt="">
    //渲染后的html页面
    <img data-v-70c98a68="" src="/static/img/logo.2f53e458.png" alt="">
    

    <style>部分的路径处理

    由于vue-loader在处理style时,采用的是style-loader,所以可能 和上面部分的转换规则不太一样。在vue-loader的内部使用了如下的配置(不一定配置,也有可能通过js直接给rules赋值):

    //在vue-loader的内部使用css-loader
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: 'css-loader',
            options: {  
              url: true, //默认选项 url为true时,则意味着可以将url中的字符串通过require()加载进来。
            },
          },
        ],
      },
    };
    
    1. 如果路径是绝对路径,会被原样保留。如 /src/assets/image/login/title.png
    //代码
    <style scoped>
    .login {
      background-image: url("/src/assets/image/login/title.png");
    }
    </style>
    
    //渲染后css
    .login[data-v-70c98a68] {
      background-image: url(/src/assets/image/login/title.png);
    }
    // 同样不会显示,编译后的路径不是这个(要放在public下面)
    
    1. 如果路径以 . 开头,将会被看作相对的模块依赖。如 ./title.png
    //代码
    <style scoped>
    .login {
      background-image: url("./title.png");
    }
    </style>
    
    //渲染后css
    .login[data-v-70c98a68] {
      background-image: url(/static/img/title.1e9fa570.png);
    }
    
    1. 如果路径以 ~ 开头,其后的部分将会被看作模块依赖,即可以加载含有别名的静态资源,又可以加载node-modules中的资源。如
    //代码
    <style scoped>
    .login {
      background-image: url("~[npm包名]/logo.png");
    }
    </style>
    
    //渲染后css
    .login-[data-v-70c98a68] {
      background-image: url(/static/img/logo.e05643fc.png);
    }
    
    //代码
    <style scoped>
    .login {
      background-image: url("~@/assets/image/login/bg.png");
      // 和上面的<template>相比,少了直接用@开头的方式url("@/assett/logo.png")
      // 错误写法
      // background-image: url("@/assets/image/login/bg.png");
    }
    </style>
    
    //渲染后css
    .login[data-v-70c98a68] {
      background-image: url(/static/img/bg.1d997ea3.png);
    }
    

    其他介绍

    拼接路径

    1. 当路径的文件名需要拼接变量的时候,可使用 require() 引入,在 template:src 或者 scriptdata computed 中都可以进行 require 引入或拼接。
    <img :src="require('./assets/images/03.jpg')" alt=""> // √
    <img :src="require('./assets/images/'+ this.imgName +'.jpg')" alt=""> // √
    <img :src="img3" alt=""> // √
    <script>
    export default:{
        data(){
            return {
              imgName: '03.jpg',
              img3: require('./assets/images/03.jpg'),
              // 或者 @是定义的别名,(注意这里可以直接用@,而在style中只能用~@)
              img3: require('@/assets/images/login-bg.png')
            }
          },
    }
    </script>
    // 编译后:
    <img src="/img/03.ea62525c.jpg" alt="">
    
    <template>
       <img :src="imgUrl">
    </template>
    
    <script>
      import imgUrl from "../assets/test.png"   
    </script>
    
    <div :style="{ backgroundImage: `url(${img3})` }"></div>
    <script>
    export default:{
        data(){
            return {
              img3: require('./assets/images/03.jpg'),
              // 或者
              img3: require('@/assets/images/login-bg.png')
            }
          },
    }
    </script>
    

    public文件夹

    1. 任何放置在public文件夹的静态资源都会被简单的复制,而不经过 webpack。你需要通过绝对路径来引用它们。

    2. 用绝对路径引入时,路径读取的是public文件夹中的资源,任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中,而不经过 webpack特殊处理。

    3. 当你的应用被部署在一个域名的根路径上时,比如 http://www.abc.com/,此时这种引入方式可以正常显示但是如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀 publicPath 是部署应用包时的基本 URL,在vue.config.js 中进行配置,详情参阅官方文档

    // vue.config.js 应用没有部署到域名的根目录
    // 引入publicPath并且将其拼接在路径中,实现引入路径的动态变动
    module.exports = {
        publicPath:'/foo/',
        ...
    }
    
    <img :src="this.publicPath + 'images/05.jpg'" alt=""> // √
    // 编译后:
    <img src="/foo/images/05.jpg" alt="">
    <script>
    export default:{
        data(){
            return {
              publicPath: process.env.BASE_URL,
            }
        },
    }
    </script>
    

    总结

    URL 转换规则

    • 如果 URL 是一个绝对路径 (例如/images/foo.png),它将会被保留不变。
    • 如果 URL 以 . 开头,它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
    • 如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源:<img src="~some-npm-package/foo.png">
    • 如果 URL 以 @ 开头,它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向/src的别名@。(仅作用于模版中)

    推荐将资源作为你的模块依赖图的一部分

    推荐将资源作为你的模块依赖图的一部分导入,这样它们会通过 webpack 的处理并获得如下好处:

    • 脚本和样式表会被压缩且打包在一起,从而避免额外的网络请求。
    • 文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。
    • 最终生成的文件名包含了内容哈希,因此你不必担心浏览器会缓存它们的老版本。
    • 综上静态资源不建议全部放在public文件夹

    参考文件

    更多相关内容
  • 主要介绍了vue引入静态js文件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 引入静态资源vue引入静态资源一.放入public√二.放入src/assets内 vue引入静态资源 一.放入public√ 例如新建一个css文件夹, 放css样式, 在public/index.html内用link引入 二.放入src/assets内 例如新建一个css...

    vue引入静态资源

    一.放入public√

    例如新建一个css文件夹, 放css样式, 在public/index.html内用link引入
    在这里插入图片描述

    二.放入src/assets内

    例如新建一个css文件夹, 放css样式, 然后再使用它的组件中用import引入.(但是引入文件内有依赖其他文件的话会报错,如下图)

    在这里插入图片描述

    合并对象

    使用展开语法(…)合并对象, 替换相同属性名的属性值.
    下列实例, 将usersInfo中的数据值赋值给this.info同名属性

        this.$eventBus.on("updateList", (usersInfo) => {
          this.info = { ...this.info, ...usersInfo };
          console.log("list", this.info);
        });
    
    展开全文
  • (一)assets文件夹与static文件夹的区别 ...区别二:assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入, 而static下的文件在.v...

    (一)assets文件夹与static文件夹的区别

    区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了

    区别二:assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入,

                  而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入

    总结一下

    1.assets用来放置样式、静态图片,只要src下面的组件中用到的资源就放在assets中。

    2.static用来放没有npm包的第三方插件,字体文件。

    3.assets与components同级  components下的.vue引用静态文件时,相对路径为 ../assets/wapFront

     

     

    4.assets与app.vue同级  相对路径为 ./assets/wapFront

     

     

     

    (二)vue如何引入其它静态文件:

    1.src目录下的资源只能import或require。

    2.想静态引入的话,建立一个与src同级的目录例如static,然后把静态资源放入该文件夹下,html的引入路径如下:./static/...

    注:试过一定要放在static文件夹下,否则报错

     

    (三)vue如何引入sass

    npm i sass --save-dev 装下它

    npm i sass-loader --save-dev 再装下它

    在webpack.base.config配置文件里加上这段
    {
      test: /\.scss$/,
      loader: 'style!css!sass'
    },
    在组件文件.vue里直接引入scss样式
    <style lang="scss">
      .hello input {
      color: red;
    }
    </style>

    (四)vue报错cannot GET
    1.你init vue-cli的时候,有个选项问你是否需要eslint可以选择不需要,因为它是检验的,可以不用,如果用它格式写的不规范启不来页面

    2.如果已经安装eslint,将下图所示部分注释掉,eslint对空格要求比较严格

    转载于:https://www.cnblogs.com/qcl-524077/articles/9233607.html

    展开全文
  • 静态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引用静态资源需要注意的事项

    万次阅读 2018-03-01 22:57:47
    项目结构如下:想在icon.styl文件夹里面引用字体...使用根目录路径方案2:将要引用的静态资源fonts文件夹放在static文件夹下icon.styl文件下面的代码如下:问题就解决了。建议:静态资源统一管理在static文件夹下。...
  • 下载静态文件下来后,放入文件夹: 组件代码: <template> <div> <button @click="compressImage">点击调用方法</button> </div> </template> <script> import ...
  • Vue介绍中static文件夹里放的是静态资源目录,如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run build 后会生成dist文件夹,把里面的index....
  • Vue 项目中,静态资源文件有二个位置可以存放,分别为 src 里面的 assets 文件夹和外层的 static 文件夹,从文件夹名字上面就可以大概的看出有何区别。 assets :资产,资源 static :静态的 同样都是放资源的...
  • ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后...
  • 今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1、记得改一下...
  • 本文介绍了在 Vue 项目中引入静态图片的两种方式, 即 require 和 import; 并给出了对应的使用方法, 可供大家参考; 另外也略微研究了一下这两种方式的区别和优劣, 不当之处, 请大家不吝指出. 原文地址: ...
  • emmm...很坑,一开始就是单纯的引入json文件,发现打包后修改json文件但是并未更新,最后又换成了还使用...静态文件 index里面引入 然后要用的地方 Vue.prototype.$dict = window.dict console.log(Vue.prototy
  • 当需要将本地静态资源传递给子组件时,不能直接将路径传给子组件,因为编译的时候会将它编译为字符串,导致找不到路径,但控制台还不会报错。这时候就需要使用以下第二种方式传递路径了。 1、第一种引用方式:直接...
  • 第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的...
  • 如果需要在vue项目中放一些独立的静态资源,比如html 文件,需要在打包的时候指定一下静态资源的位置,并指定打包后的位置。 使用的是 copy-webpack-plugin 插件。 先安装一下,到项目的根目录下执行 npm ...
  • 静态资源打包使用相对路径后css文件引入大图片路径错误问题 使用vue-cli2脚手架生成的默认打包配置文件,npm run build打包,部署项目到特定路径下://ip:port/test/index.html 此时访问//ip:port/test/index.html...
  • vue如何引入静态文件

    2021-07-23 10:39:46
    在工作中, 因为一个同事把static文件夹直接放在根目录下面, 咋一看没啥问题, 但是根本解析不出来, 只能看到一...正确的引入方式 在public文件夹下面新建一个static文件夹 一定要在public文件夹下面 在index.html文.
  • vue引入图片静态资源

    2020-07-13 11:45:04
    导入:import yzgnImg1 from '@/assets/imges/home/yzgn-img1.png' 定义:在 data 中定义:yzgnImg1 使用:<img :src="yzgnImg1" />
  • 主要介绍了vue-cli2.x项目优化之引入本地静态库文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2、解决方法之一 静态资源static存放位置放在src目录下   你可能会问为什么放在src目录下?...
  • 在用vue构建项目时,我们经常要引用不需要打包的静态资源,比如说图片,我们可以放在入口文件index.html当前目录下的static文件夹中,引入的路径为./static/images/test.png。
  • vue中如何图片等静态资源如何引入代码中?如何解决打包后部署js,css文件404?静态资源图片路径找不到?publicPath设置原理? ① 静态资源如何引入代码中(分为src/assets & public) 首先说说这两个文件夹区别:...
  • 参考vite官方解决方式 注意:这种方式无法在SSR中使用 其他引入方式请参考 vite官网 静态资源处理
  • 比如:在页面上写<el-img :src=“item.img”></el-img>,如果item.img为“@/icons/glowworm/1.jpg”,则还是会样式不生效的奥!,在data中写require才会生效。 或者<el-image :src=“require(’@/...
  • 所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src //代码 //渲染后html页面 d、如果路径以 ~ 开头,其后的部分将会被看作模块依赖,既可以加载含有别名的静态资源,又可以加载node-modules中的资源。如 //代码 //...
  • vue在index.html中引入静态文件找不到

    千次阅读 2020-05-15 14:52:58
    我在index.html 引入了一个js,在其他的组件中用window获取显示undefined webpack.dev.conf.js webpack.prod.conf.js index.js
  • vuecli3引入静态资源的方法。图片,css,js.
  • vue引入静态文件报错的问题 vue在引入静态文件(以pdf为例)会出现报错的问题,那是因为需要在vue.config.js里面进行一些相关webpack loader的配置 module:{ rules:[ { test:/\.pdf$/, use:[ { loader:'url-...
  • 1.router采用懒加载,这个应该都有的,vue-cli的时候,配置的router里面就有懒加载,就是访问哪个页面组件,就加载哪个页面的静态资源。但是这里面也有一个可以优化的点。vue-cli生成的项目,你访问首页的时候会发现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,614
精华内容 7,445
关键字:

vue引入静态资源