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模板类似

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

3. 旧版改法

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 直接用

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

<img src="../../../public/5.jpg" alt="public用" />

4.2注意

如果 URL是一个~ 开头,会作为一个模块请求被解析,

甚至可以引用依赖包中的资源

<img width="200" src="~X-npm-package.jpg" />

4.3注意

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

<img width="200" src="/assets/img/2.jpg" alt="直接使用" />
    <img width="200" src="http://image.com.xx/img/2.jpg" " />

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

1.public

这个文件夹 不参与 打包,webpack管不了,类似于 之前脚手架当中的 static

目录下的文件会被直接复制到最终打包的目录,类似于一些公共不变的东西 ,例如我之前项目中的电话条SDK,一些音视频,iconfont也行

结论 这个目录放不会变的 文件

2. assets

这个目录放可能会变动的文件

目录中的文件会被 webpack处理解析为模块,只支持相对路径的形式

因为这个可以变动 所以这里也可以分化出不同的子目录

例如 assets/util  存放工具类的js的;

assets/api  存放业务接口