Nuxt.js 靜態(tài)資源和打包的操作

更新時(shí)間：2020年11月06日 08:36:56 作者：UIEngineer

這篇文章主要介紹了Nuxt.js 靜態(tài)資源和打包的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

直接引入圖片

我們?cè)诰W(wǎng)上任意下載一個(gè)圖片，放到項(xiàng)目中的static文件夾下面，然后可以使用下面的引入方法進(jìn)行引用。

<div <img src="~static/logo.png"></div>

這時(shí)候在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框架非常簡(jiǎn)單，因?yàn)榇蟛糠值氖虑樗紴槲覀冏龊昧?，我們只要安裝它的規(guī)則來編寫代碼。

補(bǔ)充知識(shí)：Nuxt.js性能優(yōu)化之圖片加載

方法：

小圖片放在assets文件夾中會(huì)通過webpack使用file-loader和url-loader處理轉(zhuǎn)換成base64;

***切記:大圖片會(huì)適得其反!!!

以上這篇Nuxt.js 靜態(tài)資源和打包的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue基礎(chǔ)之偵聽器詳解
這篇文章主要為大家介紹了Vue基礎(chǔ)之偵聽器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
詳解vue的雙向綁定原理及實(shí)現(xiàn)
這篇文章主要介紹了vue雙向綁定原理及實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
深入理解Vue router的部分高級(jí)用法
這篇文章主要介紹了Vue router的部分高級(jí)用法，主要是針對(duì)已經(jīng)有初步了解Vue-router的人，通過本文主要給大家介紹路由元信息，滾動(dòng)行為以及路由懶加載這幾個(gè)的使用方法。感興趣的朋友一起看看吧
2018-08-08
使用vue.js在頁面內(nèi)組件監(jiān)聽scroll事件的方法
今天小編就為大家分享一篇使用vue.js在頁面內(nèi)組件監(jiān)聽scroll事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Ant Design Vue Table組件合并單元格方式
這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue頁面離開后執(zhí)行函數(shù)的實(shí)例
下面小編就為大家分享一篇vue頁面離開后執(zhí)行函數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue.config.js里面的devserver如何配置
本文介紹了vue.config.js中devServer的常見配置方式,包括基本配置、代理配置、熱模塊替換、靜態(tài)資源服務(wù)、HTTPS配置、多代理配置以及其他配置項(xiàng),幫助開發(fā)者根據(jù)項(xiàng)目需求進(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動(dòng)態(tài)組件與異步組件超詳細(xì)講解
這篇文章主要介紹了Vue動(dòng)態(tài)組件與異步組件，動(dòng)態(tài)組件是根據(jù)數(shù)據(jù)的變化，可以隨時(shí)切換不同的組件，比如咱們現(xiàn)在要展示一個(gè)文本框和輸入框，我們想要根據(jù)我們data中定義的值去決定是顯示文本框還是輸入框
2023-03-03
Vue3.0監(jiān)聽器watch與watchEffect詳解
在 Vue 3 中,watch 仍然是一種用于監(jiān)聽數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的方式,不過在組合式 API 中,watch 的使用方式與選項(xiàng)式 API 略有不同,這篇文章主要介紹了Vue3.0監(jiān)聽器watch與watchEffect,需要的朋友可以參考下
2023-12-12