Nuxt之静态资源和打包

2,859

一. 如何引入静态资源图片

  • 创建图片

随便找个一张图片放入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教程,感谢胖哥