Nuxt之静态资源和打包

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

• 建立图片
  

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