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教程，感謝胖哥