Nuxt.js 靜態(tài)資源和打包的操作
更新時間：2020年11月06日 08:36:56 作者：UIEngineer
這篇文章主要介紹了Nuxt.js 靜態(tài)資源和打包的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
直接引入圖片
我們在網(wǎng)上任意下載一個圖片，放到項目中的static文件夾下面，然后可以使用下面的引入方法進(jìn)行引用。
<div <img src="~static/logo.png"></div>
這時候在npm run dev 下是完全正常的，那我們看一下打包。
打包靜態(tài)HTML并運(yùn)行
用Nuxt.js制作完成后，你可以打包成靜態(tài)文件并放在服務(wù)器上，進(jìn)行運(yùn)行。
在終端中輸入：
npm run generate
然后在dist文件夾下輸入live-server就可以了。
總結(jié)：
Nuxt.js框架非常簡單，因?yàn)榇蟛糠值氖虑樗紴槲覀冏龊昧?，我們只要安裝它的規(guī)則來編寫代碼。
補(bǔ)充知識：Nuxt.js性能優(yōu)化之圖片加載
方法：
小圖片放在assets文件夾中會通過webpack使用file-loader和url-loader處理轉(zhuǎn)換成base64;
***切記:大圖片會適得其反!!!
以上這篇Nuxt.js 靜態(tài)資源和打包的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- nuxt.js添加環(huán)境變量,區(qū)分項目打包環(huán)境操作
- Docker部署Nuxt.js項目的實(shí)現(xiàn)
- nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作
- Nuxt.js nuxt-link與router-link的區(qū)別說明
- Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)
- nuxt.js 在middleware(中間件)中實(shí)現(xiàn)路由鑒權(quán)操作
- nuxt.js寫項目時增加錯誤提示頁面操作
- 創(chuàng)建nuxt.js項目流程圖解
- nuxt.js 多環(huán)境變量配置
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)圖片輪播效果，vue如何實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue工程師必會封裝的埋點(diǎn)指令思路知識總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue工程師必會封裝的埋點(diǎn)指令思路知識,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-12-12
中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個簡單的連連看游戲,連連看大家一定都玩過吧,通過消除相同的圖案來清理棋盤,小編將一步步引導(dǎo)大家完成整個游戲的制作過程,讓我們開始吧,一起為中秋節(jié)增添一些互動和娛樂2023-09-09
vue-router相關(guān)基礎(chǔ)知識及工作原理
這篇文章主要介紹了vue-router相關(guān)基礎(chǔ)知識及單頁面應(yīng)用的工作原理,需要的朋友可以參考下2018-03-03
Vue中的基礎(chǔ)過渡動畫及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動畫原理解析,需要的朋友可以參考下2018-12-12
vue3開啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例
本文主要介紹了vue3開啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個API來實(shí)現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue?被設(shè)計為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽滾動條頁面滾動動畫的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項目過程中，經(jīng)常會用到組件來管理不同的功能，有一些公共的組件會被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
ue3.2新增了一個指令v-memo,引入這個指令的目的是幫助大家更好的為我們的應(yīng)用做性能優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于vue3.2新增指令v-memo基本使用的相關(guān)資料,需要的朋友可以參考下2022-09-09