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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
vue中render函数的使用详解
Oct 12 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
微信小程序基于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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python调用Windows命令打印文件
2020/02/07 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
2015年高校辅导员工作总结
2015/04/20 职场文书
搞笑结婚保证书
2015/05/08 职场文书
总结会主持词
2015/07/02 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
校园安全学习心得体会
2016/01/18 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
MySQL多表查询机制
2022/03/17 MySQL
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸