vue.js中项目中图片使用

webpack 的动态导入 和 require.context() 分析及使用注意

规则：

1. 动态导入语法必须是字符串拼接，不能传入函数。
   正确：import('./src' + args + '/index.js') 错误： import(someFun())
2. 动态导入语法必须以 ./ 或者 webpack 设置的 alias 开始进行字符串拼接
   正确：import('./src' + args + '/index.js') 或者 import('Src' + args + '/index.js') Src是一个 alias 地址
3. import('/src' + args + '/index.js')动态导入中的变量 args 变量在打包阶段只是一个占位符的作用，等价于 ./src/*/index.js
4. require.context(目录, 是否需要地柜, 筛选器) 参数只有静态常量有效

动态导入 import 和 require.context() 的基本概念

1. 作用阶段（两个）

- 打包编译时进行词法分析，决定哪些文件需要打包，拆分还是合并
- 程序运行时使用第一阶段打包好的模块

2. 在编辑阶段都会打包非注释部分
   不管程序里有没有实际 调用动态导入 或者 require.contexxt() 部分的代码，只要这部分代码被 webpack 发现，只要不被注释，webpack 都会按照语法执行打包，因为这是编译阶段语法分析的结果。
3. 动态导入阶段
   import('./src' + args + '/index.js') 遇到是 import 变量拼接的语法，就会把匹配到的所有的文件分别作为一个独立的 chunk 进行打包。
4. 编辑阶段

- 根据语法拆分多个独立的包
- 变量只是类似占位符的作用
  打包过程发生在编译阶段，webpack 看不懂类似 import(someFunc()) 这种语法，因为在编译阶段不知道 someFunc() 是什么，执行出来的结果是啥，webpack 只认识这种语法 import('./app' + xxx + '/store/index.js')，webpack的理解就是 把 xxx 替换成占位符，然后匹配到 ./app/*/store/index.js 的文件分别打包成 chunk，然后在程序运行的时候，再根据变量生成的路径，使用匹配到的 chunk 块。
- 有效的变量拼接开头
  1. webpack 配置的 alias 开头
  2. 以 ./ 开头的语法 import('./root/' + args + '/index.js')
  3. 诸如 ../ 和 绝对路径 开头都无效

5. require.context()
   语法 require.context(目录, 是否递归目录, 文件筛选条件)所有参数必须是直接字符串，变量无效。 会在目录中进行递归 或者 非递归 的按照筛选条件打包成一个文件。

vue.js中引入图片路径的几种方式

• 相对路径：相对顾名思义，需要一个参照物。对某一个文件夹而言，这个路径这是相对的。一般以 ./ 或者 ../ 开头。 ./src/page/index.js 等价于 src/page/index.js

• 绝对路径：使用/开头，当前站点根目录，绝对路径的写法省略了协议、主机、端口、仅保留从站点根目录开始寻找资源的路径。

• 完整路径：这是一个完整的URL，可以表示互联网中的任意位置的任意资源。http://www.baidu.com/

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

  1. 在 javascript中 或者 template/ Css 中通过相对路径以 ./开头。这类引用会被 webpack 处理
  • 诸如 、background: url(...) 和 css @importe 的资源，
    • 写在 template 中内联 style 的 background: url(...) 样式，在当前版本的测试中，即使使用了相对路径也不会被webpack处理
  • 诸如 url('./images.png') 会被 webpack 编译为 require('./images.png')
  2. 放置在 public 目录下的 或者以 绝对路径引用的，这类资源将会被直接拷贝，而不会经过 webpack 的处理，你需要使用绝对路径来引用它们。
  • 如果url是一个绝对路径，例如：/images/foo.png，它将会被保留不变。

  示例：

  1. 常见的引用方式：路径是固定的字符串，图片会被 webpack 处理，文件若丢失，会直接在编译时直接报错。生成的文件包含了 hash 值。
     编译后
  2. （❌）错误的使用方式：使用 v-bind 指令处理其内容，相对路径不会被 webpack 的 file-loader 处理
     编译后
  3. 当路径名需要拼接变量的时候：可使用 require() 引入，在 template的 :src 或者 JavaScript 中的 data\computed 中都可以使用 require 引入或拼接

    // √
    // √
    // √
   
   // 编译后:
   
  

  4. 用绝对路径引用资源文件，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。
     当你的应用被部署在一个域名的根路径上时，比如http://www.abc.com/，此时这种引入方式可以正常显示
     但是如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀
     publicPath 是部署应用包时的基本 URL，在 vue.config.js 中进行配置

   编译后 
  

  1. 引入publicPath并且将其拼接在路径中，实现引入路径的动态变动

   // √
  // 编译后:
  
  
  
  //vue.config.js
  module.exports = {
      publicPath:'/foo/',
      ...
  }