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. 旧版改法
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 直接用
路径切换成 自己的路径就好
<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 存放业务接口
