一. 如何引入静态资源图片
- 创建图片
随便找个一张图片放入static文件夹中,使用“~”引入
- 直接引入
<div class="diss">
<img src="~static/avatar.jpg" alt="" width="50" height="50">
</div>
- css背景图片引入
.diss {
width: 100px;
height: 100px;
background-image: url('~static/avatar.jpg');
background-size: 100px 100px;
}
- 启动服务
npm run dev
二. 打包
npm run generate
根目录中会出现dist文件夹,复制dist文件夹到桌面,用编辑器打开,注意:不能直接右键打开页面,要使用服务器打开
三. 启动服务
安装live-server
npm i live-server -g
live-server
这样就可以看到页面内容了
本文引用于技术胖nuxt教程,感谢胖哥