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并運行
用Nuxt.js制作完成后，你可以打包成靜態(tài)文件并放在服務(wù)器上，進(jìn)行運行。
在終端中輸入：
npm run generate
然后在dist文件夾下輸入live-server就可以了。
總結(jié)：
Nuxt.js框架非常簡單，因為大部分的事情他都為我們做好了，我們只要安裝它的規(guī)則來編寫代碼。
補充知識：Nuxt.js性能優(yōu)化之圖片加載
方法：
小圖片放在assets文件夾中會通過webpack使用file-loader和url-loader處理轉(zhuǎn)換成base64;
***切記:大圖片會適得其反!!!
以上這篇Nuxt.js 靜態(tài)資源和打包的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家介紹了Vue基礎(chǔ)之偵聽器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了vue雙向綁定原理及實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue router的部分高級用法，主要是針對已經(jīng)有初步了解Vue-router的人，通過本文主要給大家介紹路由元信息，滾動行為以及路由懶加載這幾個的使用方法。感興趣的朋友一起看看吧2018-08-08
使用vue.js在頁面內(nèi)組件監(jiān)聽scroll事件的方法
今天小編就為大家分享一篇使用vue.js在頁面內(nèi)組件監(jiān)聽scroll事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
下面小編就為大家分享一篇vue頁面離開后執(zhí)行函數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文介紹了vue.config.js中devServer的常見配置方式,包括基本配置、代理配置、熱模塊替換、靜態(tài)資源服務(wù)、HTTPS配置、多代理配置以及其他配置項,幫助開發(fā)者根據(jù)項目需求進(jìn)行定制2025-01-01
vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用
這篇文章主要介紹了vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue動態(tài)組件與異步組件，動態(tài)組件是根據(jù)數(shù)據(jù)的變化，可以隨時切換不同的組件，比如咱們現(xiàn)在要展示一個文本框和輸入框，我們想要根據(jù)我們data中定義的值去決定是顯示文本框還是輸入框2023-03-03
Vue3.0監(jiān)聽器watch與watchEffect詳解
在 Vue 3 中,watch 仍然是一種用于監(jiān)聽數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的方式,不過在組合式 API 中,watch 的使用方式與選項式 API 略有不同,這篇文章主要介紹了Vue3.0監(jiān)聽器watch與watchEffect,需要的朋友可以參考下2023-12-12