vue 图片资源应该如何存放并引入(public、assets)?

       全局cli配置:vue.config.js

        之前写项目就想着怎么简单怎么来,图片要用了,就直接在要用图片的页面,新建一个跟页面同等级的 imgs 文件夹,然后在页面中直接 ./imgs/图片.png,不得不说这样写很方便。

但是这样做显得不太高级,而且图片太多的时候,可能会重复添加到项目中。vue-cli3 里面有两个可以存放图片的位置:public、assets,这两个的区别一直分得不是很清楚,今天就整理疏通一下,将了解下面3点:

  1. 两者存放什么图片,什么时候使用,在某种情况下应该使用哪种方式;
  2. 使用方式;
  3. 图片路径转换;

在了解上面几点之前,先来看看官网的介绍:

一、处理静态资源

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

  1. 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
  2. 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理。

        第一种方式:例如在某个 .vue 文件中通过 import "./" 的方法引入某个组件、js方法,或者像我之前在项目中写的 ./imgs/图片.png,这就是采用相对路径引用资源的方法。

        第二种方式:例如在 public/index.html 中 favicon.ico"> 通过 <%= BASE_URL %> 引用 favicon.icon,这是绝对路径。

        两种方式简单来说,一种是相对路径引用静态资源(会被webpack处理),一种是采用绝对路径引用资源(不会被webpack处理)。【这里的资源不局限于图片,还有js、css等都可以属于静态资源】

1.1 相对路径引用/导入资源

        当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中。在其编译过程中,所有诸如 background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖

vue 图片资源应该如何存放并引入(public、assets)?_第1张图片

根据上面官方的讲解,大概情形在项目中的展示情况:

1.1.1 通过静态路径导入资源时,例如导入图片,我们在模板中使用,需要通过 require 的这种方法去引入:



export default {
  data(){
    return {
     //相对路径不一定都是./,也可能是../,按照图片存放位置来决定
      logo: require("./imgs/logo.png") 
    }
  }
}

1.1.2 在写背景图样式的时候,就可以像普通 H5 页面一样直接引入: 



1.1.3 若是引入动态背景图,写法与1相似






二、URL转换规则

  1. 如果 URL 是一个绝对路径 (例如 /images/foo.png),它将会被保留不变。

  2. 如果 URL 以 . 开头,它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。

  3. 如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源:

    
    
  4. 如果 URL 以 @ 开头,它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 /src 的别名 @(仅作用于模版中)

三、关于public

3.1 public 文件夹

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

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

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

public 目录提供的是一个应急手段,当你通过绝对路径引用它时,留意应用将会部署到哪里。如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀:

  • 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中,你需要通过 <%= BASE_URL %> 设置链接前缀:

    
    
  • 在模板中,你首先需要向你的组件传入基础 URL:

    data () {
      return {
        publicPath: process.env.BASE_URL
      }
    }
    

    然后:

    
    

3.2 何时使用 public 文件夹

  • 你需要在构建输出中指定一个文件的名字。
  • 你有上千个图片,需要动态引用它们的路径。
  • 有些库可能和 webpack 不兼容,这时你除了将其用一个独立的 

你可能感兴趣的:(vue基础笔记,vue.js)