分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

nuxt.js1-9

发布时间:2023-09-06 01:55责任编辑:沈小雨关键词:js

静态资源和打包

 直接引入图片

  我们在网上任意下载一个图片,放到项目中的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就可以了。

nuxt.js1-9

原文地址:https://www.cnblogs.com/xiaofandegeng/p/9074002.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved