参考这篇文章:https://blog.csdn.net/qq_38262910/article/details/89147571?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

1. 一般需要安装 中间件 koa-static

npm install koa-static --save  

并且设置 静态资源目录

const path = require('path')
const staticFiles = require('koa-static')
app.use(staticFiles(path.join(__dirname + './public/')))

  

这是目录结构,app.js是我们的入口文件。为了public里面保存有我们上传的图片,为了在浏览器中可以查看这些图片,我们需要把该public目录设置为静态资源目录。
我们需要在入口文件app.js中配置

2. 但是在koa2 框架中,已经事先为我们配置好了 koa-static

在这里

所以,我们直接项目跑起来即可 npm start  或 npm run dev 即可

浏览器地址直接访问即可

static模块的使用也比较简单,规划好静态文件存放的路径,使用app.use挂载在应用上即可。 
下面的代码中,__dirname+ “/static/html” 表示静态文件存放的路径,当接收到请求后,会在该路径下进行查找,serve还可以接收一个对象,表示查找文件的后缀名。

const Koa = require('koa');
const app = new Koa();
const serve = require("koa-static");
app.use(serve(__dirname+ "/static/html",{ extensions: ['html']}));
app.listen(3000);

  

nodejs koa2 设置 静态资源目录的更多相关文章

  1. [nginx]设置代理和静态资源目录

    upstream disconf { server ; #tomcat服务器的地址 } server { listen ; #监听端口 server_name localhost; #域名 index ...

  2. springboot设置静态资源不拦截的方法

    springboot设置静态资源不拦截的方法 springboot不拦截静态资源需配置如下的类: import org.springframework.context.annotation.Confi ...

  3. SpringBoot静态资源目录

    在web开发中,静态资源的访问是必不可少的,如:图片.js.css 等资源的访问. SpringBoot对静态资源访问提供了很好的支持,基本使用默认配置就能满足开发需求. 在传统的web项目中静态资源 ...

  4. springboot设置静态资源缓存一年

    由于本人所在项目组,所用的项目是前后端分离的,前端是React 的SPA,每次打包都会新版本的静态文件. 然而,在有些时候,这些静态资源是不变的,故可以将资源缓存至用户本地,提升性能. 写法如下,需要 ...

  5. Spring Boot 设置静态资源访问

    问题描述 当使用spring Boot来架设服务系统时,有时候也需要用到前端页面,当然就不可或缺地需要访问其他一些静态资源,比如图片.css.js等文件.那么如何设置Spring Boot网站可以访问 ...

  6. zuul(springboot)设置静态资源代理和默认首页代码一例

    直接上代码: public class StaticResourcesConfig extends WebMvcConfigurerAdapter { private static final Log ...

  7. Django实战(5):引入bootstrap,设置静态资源

    之前生成了Product类的scaffold,但是如同rails的开发者David所讲的那样,scaffold几乎没什么用.所以按照<Agile Web Development with Rai ...

  8. .htaccess设置静态资源缓存(即浏览器缓存)

    在HTTP标头中为静态资源设置过期日期或最长存在时间,可指示浏览器从本地磁盘中加载以前下载的资源,而不是通过网络加载.这样, 网站加载速度会更快. 下面的代码都需要放到.htaccess中才能生效. ...

  9. SSM 设置静态资源处理

    使用weblogic的虚拟路径virtual-directory-mapping 在页面上展示文件服务器上的图片 <weblogic-web-app> ......省略其他部分 <c ...

随机推荐

  1. java基础---数组的查找算法(2)

    一.查找的基本概念 查找分为有序查找和无序查找,这里均以数组为对象,有序查找指的是数组元素有序排列,无序查找指的是数组元素有序或无序排列 平均查找长度(Average Search Length,AS ...

  2. MySQL数据库性能优化该如何入手

    今天小杨给大家分享一篇关于数据库查询优化,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情. ...

  3. C语言:if条件写法

    if 语句的判断条件中不是必须要包含关系运算符,它可以是赋值表达式,甚至也可以是一个变量,常量 例如: //情况① if(b){ //TODO: } //情况② if(b=5){ //情况① //TO ...

  4. C语言:fopen函数

    在C语言中,操作文件之前必须先打开文件:所谓"打开文件",就是让程序和文件建立连接的过程.打开文件之后,程序可以得到文件的相关信息,例如大小.类型.权限.创建者.更新时间等.在后续 ...

  5. 前端js重组树形结构数据方法封装

    不知道大家平时工作中,有没有遇到这样一种情况:后端接口返回的数据,全都是一维的数组,都是平铺直叙式的数据,业务需求却要你实现树形结构的功能.那么,针对这种情况该怎么办呢?是跟后台好好沟通一下呢,还是沟 ...

  6. kubespray-2.14.2安装kubernetes-1.18.10(ubuntu-20.04.1)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. React事件绑定的方式

    一.是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Compo ...

  8. PO封装设计模式 -- App移动端测试

    前言: 一.App_Po 封装 (用互联网上随便一个app进行) base 存放的是页面基础类,后续的类需继承基础类 common 存放的是公共部分,测试固件分离部分,新增截图功能部分 Data 存放 ...

  9. 极致简洁的微前端框架-京东MicroApp开源了

    前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...

  10. Hive开发要知道数据仓库的四个层次设计

    数据仓库:数据仓库全面接收源系统数据,ETL进程对数据进行规范化.验证.清洗,并最终装载进入数据集市,通过数据集市支持系统进行数据查询.分析,整个数据仓库包含四大层次. 1.数据仓库的四个操作    ...