Nuxt之靜態資源和打包
阿新 • • 發佈：2020-09-02
一. 如何引入靜態資源圖片
- 建立圖片
隨便找個一張圖片放入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複製程式碼
這樣就可以看到頁面內容了
"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資料夾，然後你如果要釋出的話，嘿嘿…