Nuxt之静态资源和打包

一. 如何引入静态资源图片

• 创建图片

随便找个一张图片放入static文件夹中，使用“~”引入

• 直接引入

 

 

 

1.  
   <div class="diss">
2.  
   <img src="~static/avatar.jpg" alt="" width="50" height="50">
3.  
   </div>复制代码

 

• css背景图片引入

 

 

 

1.  
   .diss {
2.  
   width: 100px;
3.  
   height: 100px;
4.  
   background-image: url('~static/avatar.jpg');
5.  
   background-size: 100px 100px;
6.  
   }复制代码

• 启动服务

 

 

 

npm run dev复制代码

 

二. 打包

 

 

 

npm run generate复制代码

 

根目录中会出现dist文件夹，复制dist文件夹到桌面，用编辑器打开，注意：不能直接右键打开页面，要使用服务器打开

三. 启动服务

安装live-server

 

 

 

1.  
   npm i live-server -g
2.  
   live-server复制代码

 

这样就可以看到页面内容了

 

 

"generate"和"build"打包方式主要有两个区别，文件的区别，和发布的区别

1、文件的区别

generate
  1-1:使用generate打包后每个对应的页面都会生成一个html，你在打包的时候不能关闭后台，他会请求后台数据生成首屏的数据
  1-2:这样打包有一个弊端，当你首屏的数据发生更改的时候，对不起，他还是显示的是之前的数据，要想改变的话，需要重新打包发布才行。
  1-3:所以，如果你的首屏是动态的就不建议使用这种打包方式了。
  1-4:有人看到每个页面都生成了HTML页面，以为不再请求后台（我最开始就是这样认为的），实际上不是的，他的首屏数据之前渲染好了，但是其它数据还是从后台获取，比如翻页，第二页数据是从新请求后台的，你再次返回第一页也是再次请求的。

 

build
  1-1：build打包生成的是动态页面，当然是同样具有SEO功能。

 

2、发布的区别

generate
  使用generate打包和之前使用vue打包一样，生成一个dist文件夹，然后各种发布操作和vue一样的

 

build
  1、build打包就比较复杂了，他会生成一个.nuxt文件夹，然后你如果要发布的话，嘿嘿…