vue-build之后图片不显示-图片路径的写法

1.前言

build之后 直接运行html文件,图片加载不出来的问题
新旧版本用法区别

---

2. 先说目前主流的 vue.config.js版本的解决方法

vue.config.js 这个文件需要自己 在项目根目录创建哦
公共资源路径 publicPath需要设置下
下面的 生产环境 开启压缩 可以配置

const path = require("path");
module.exports = {
  publicPath: './',
   // 生产环境，开启js\css压缩
    if (process.env.NODE_ENV === 'production') {
        config.plugin('compressionPlugin').use(new CompressionPlugin({
          test: /\.(js|css|less)$/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        }))
    }

}

npm run build之后
打开 dist目录下的 html文件就可以显示图片了

public 根据环境配置

  publicPath:process.env_NODE_ENV ==="production"? "/shop/" :"/服务器地址文件夹名"

使用方式

自带的public/index.html
<%= BASE_URL %> 和 ejs模板类似

---

3. 旧版改法

1.png

---

4. 图片相关

js,css或者vue文件中,使用相对路径(必须以.开头)引用一个静态资源时,该资源会被webpack处理
@作为一个模块请求解析,cli中默认 @表示 src目录的别名

4.1 如果URL以 . 开头会作为一个相对模块请求来解析,并基于文件系统相对路径

想要打包后的图片显示 一般需用 到 require

引用

// 方式一: es6  转成base64位图片使用
import es6Img1 from "./img/4.jpg"
// 方式二:
let es6Img2 = require("./img/5.jpg")

data 直接使用

     es6Img3:require("./img/4.jpg"),
      assert1:require("@/assets/1.jpg"),
      assert2:require("../../assets/4.jpg"),

public 直接用

路径切换成 自己的路径就好

---

4.2注意

如果 URL是一个~ 开头,会作为一个模块请求被解析,
甚至可以引用依赖包中的资源

---

4.3注意

如果 URL是一个绝对路径,它将会被保留不变

---

5. 上面牵扯到几个文件夹

1.public

这个文件夹 不参与 打包,webpack管不了,类似于 之前脚手架当中的 static
目录下的文件会被直接复制到最终打包的目录,类似于一些公共不变的东西 ,例如我之前项目中的电话条SDK,一些音视频,iconfont也行
结论 这个目录放不会变的 文件

2. assets

这个目录放可能会变动的文件
目录中的文件会被 webpack处理解析为模块,只支持相对路径的形式

因为这个可以变动 所以这里也可以分化出不同的子目录
例如 assets/util 存放工具类的js的;
assets/api 存放业务接口

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉