nuxt.js1-9

Posted 2020-11-07 小凡的耿

静态资源和打包

　直接引入图片

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

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

　　这种引用方法是不用估计相对路径的，“~”就相当于定位到了项目跟目录，这时候你的图片路径就不会出现错误，就算打包也是正常的。

　CSS引入图片

　　如果在CSS中引入图片，方法和html中直接引入是一样的，也是用“~”符号引入。

<style>
  .diss{
    width: 300px;
    height: 100px;
    background-image: url(‘~static/logo.png‘)
  }
</style>

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

　打包静态HTML并运行

　　用Nuxt.js制作完成后，你可以打包成静态文件并放在服务器上，进行运行。
　　在终端中输入：

npm run generate

　　会生成一个dist文件夹，里边就是生产的静态html文件，直接放到服务器端进行运行了。

　　如果你不会Node或者其他服务器知识，你可以简单安装一个最简单的服务器-live-server。

npm install -g live-server

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