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 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
vue双向绑定简要分析
Mar 23 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
vue中如何添加百度统计代码
Dec 19 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
第九节--绑定
2006/11/16 PHP
第十一节--重载
2006/11/16 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
PHP概率计算函数汇总
2015/09/13 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
应用服务器有那些
2012/01/19 面试题
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
酒后驾驶检讨书
2014/01/27 职场文书
会计专业求职信范文
2014/03/16 职场文书
爱的教育读书笔记
2015/06/26 职场文书
医院病假条范文
2015/08/17 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS