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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
js的touch事件的实际引用
Oct 13 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
微信小程序基于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 gd等比例缩放压缩图片函数
2016/06/12 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Python中with语句的用法
2015/04/15 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
大学生自荐书范文
2013/12/10 职场文书
入党自荐书范文
2014/03/09 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
草房子读书笔记
2015/06/29 职场文书
2019大学生实习报告
2019/06/21 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server