Nuxt.js 静态资源和打包的操作


Posted in Javascript onNovember 06, 2020

直接引入图片

我们在网上任意下载一个图片,放到项目中的static文件夹下面,然后可以使用下面的引入方法进行引用。

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

这时候在npm run dev 下是完全正常的,那我们看一下打包。

打包静态HTML并运行

用Nuxt.js制作完成后,你可以打包成静态文件并放在服务器上,进行运行。

在终端中输入:

npm run generate

然后在dist文件夹下输入live-server就可以了。

总结:

Nuxt.js框架非常简单,因为大部分的事情他都为我们做好了,我们只要安装它的规则来编写代码。

补充知识:Nuxt.js性能优化之图片加载

方法:

小图片放在assets文件夹中会通过webpack使用file-loader和url-loader处理转换成base64;

***切记:大图片会适得其反!!!

Nuxt.js 静态资源和打包的操作

以上这篇Nuxt.js 静态资源和打包的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 #Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 #Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 #Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 #Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 #Javascript
如何利用vue实现波谱拟合详解
Nov 05 #Javascript
关于Vue中$refs的探索浅析
Nov 05 #Javascript
You might like
php开发文档 会员收费1期
2012/08/14 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python 远程统计文件代码分享
2015/05/14 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
三个Unix的命令面试题
2015/04/12 面试题
感恩寄语大全
2014/04/11 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
公司租房协议书
2014/10/14 职场文书
小英雄雨来观后感
2015/06/09 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL