Nuxt之靜態資源和打包

一. 如何引入靜態資源圖片

• 創建圖片

隨便找個一張圖片放入static文件夾中，使用“~”引入

• 直接引入

 

 

 

1.  
   <div class= "diss">
2.  
   <img src= "~static/avatar.jpg" alt="" width="50" height="50">
3.  
   </div> 復制代碼

 

• css背景圖片引入

 

 

 

1.  
   .diss {
2.  
   width: 100px;
3.  
   height: 100px;
4.  
   background-image: url( '~static/avatar.jpg');
5.  
   background-size: 100px 100px;
6.  
   } 復制代碼

• 啟動服務

 

 

 

npm run dev復制代碼

 

二. 打包

 

 

 

npm run generate復制代碼

 

根目錄中會出現dist文件夾，復制dist文件夾到桌面，用編輯器打開，注意：不能直接右鍵打開頁面，要使用服務器打開

三. 啟動服務

安裝live-server

 

 

 

1.  
   npm i live-server -g
2.  
   live-server 復制代碼

 

這樣就可以看到頁面內容了

 

 

"generate"和"build"打包方式主要有兩個區別，文件的區別，和發布的區別

1、文件的區別

generate
  1-1:使用generate打包后每個對應的頁面都會生成一個html，你在打包的時候不能關閉后台，他會請求后台數據生成首屏的數據
  1-2:這樣打包有一個弊端，當你首屏的數據發生更改的時候，對不起，他還是顯示的是之前的數據，要想改變的話，需要重新打包發布才行。
  1-3:所以，如果你的首屏是動態的就不建議使用這種打包方式了。
  1-4:有人看到每個頁面都生成了HTML頁面，以為不再請求后台（我最開始就是這樣認為的），實際上不是的，他的首屏數據之前渲染好了，但是其它數據還是從后台獲取，比如翻頁，第二頁數據是從新請求后台的，你再次返回第一頁也是再次請求的。

 

build
  1-1：build打包生成的是動態頁面，當然是同樣具有SEO功能。

 

2、發布的區別

generate
  使用generate打包和之前使用vue打包一樣，生成一個dist文件夾，然后各種發布操作和vue一樣的

 

build
  1、build打包就比較復雜了，他會生成一個.nuxt文件夾，然后你如果要發布的話，嘿嘿…