用nodejs在本地部署前端项目

以下均采用 express + nodejs 来部署

基础的方法

1，编写一个index2.js 文件

如下

const express = require('express')  //导入express，需要下载
const fs = require('fs')

const app = express()  
app.get('/', (req, res) => {  // 开启一个路由  /  
  fs.readFile('index2.htm', function (err, data) {  // 当客户端访问 / 时，就读取index2.htm文件，并返回给客户端
      if (err) {
          throw err
      } else {
          // res.send('Hello World!')
          res.end(data)
      }
  })
})
app.listen(3000, () => {
  console.log('服务器已经启动,请访问 http://localhost:3000')
})

之后运行 node index2.js 命令
以下就是运行结果
这是我的文件结构，以及index2.htm文件的内容
在这里插入图片描述
然后访问http://localhost:3000/

可以看到index2.htm文件已经可以访问。
但是，有一个问题，如果你要引入一个文件（事实上，项目都会引入一些文件，比如css，js……）比如像下面这样：

这是我的a.js文件

然后，你刷新页面会发现控制台出现了一个错误

在这里插入图片描述
表示找不到这个文件，在http://localhost:3000/a.js这个路径下面没有这个文件，
这样怎么办？我们思考一个问题，既然通过开启get类型的请求返回html文件可以被访问到，那如果再开启一个get接口吧把这个js文件读取给客户端是不是也可以，于是，就有了以下的代码：

app.get('/a.js', (req, res) => { 
  fs.readFile('a.js', function (err, data) {
      if (err) {
          throw err
      } else {
          // res.send('Hello World!')
          res.end(data)
      }
  })
})

注意：写在app.listen(3000, () => 这行的上面就可以
这个时候，刷新页面，当然你需要重新运行node index2.js ,因为你修改了index2.js文件
然后浏览器就不会出现这个问题了，可以看到该js文件已经运行了
在这里插入图片描述
同样的道理，此类问题基本都可以这么解决，但是，我们难道每引入一个文件就新增一个后台接口么？这样也太麻烦了吧。

请看第二种方法可以解决这个问题，同时又有新的方法

使用静态文件目录

index2.js文件如下 app.use(express.static(‘www’)) //设置静态文件目录在这里插入图片描述

此时可以直接访问www目录下的文件http://localhost:3000/img.jpg

然后，我们可以这么做，把a.js文件也放到www目录下，然后注释掉index2.js中的这部分代码
在这里插入图片描述
你会发现，依然可以运行，这样的话，就算有别的js，css文件都可以直接，放到www目录下方，也不用担心找不到该文件了。

值得注意的是，如果你注册了静态目录那么，该文件如果有index.html的文件，他的优先级要更高以些，比如，我在www目录下新建一个index.html：
在这里插入图片描述
此时，访问，就会加载/www/index.html 文件，也就是说，有静态目录，先找静态目录，然后找我们的接口路由

**总结一下：
如果你需要部署一个前端的项目，那最简单的方法就是：注册一个静态目录，把打包后的dist文件夹，全部丢到www目录里，他就会自动加载index.html文件。
如果，你的项目不止一个，你可以自己写接口，读取不同的html文件，然后，把他们需要依赖的js，css等文件丢到www目录下面。
**

也就是说www静态目录是一个很方便的做法，因为他里面的资源可以直接访问

本文链接：https://blog.csdn.net/qq_46634851/article/details/126363238

智能推荐

10. 查询小米Note2共有几次订单，显示产品名称，订单数量

...

新发的日常小实验——使用IETester测试不同IE版本的浏览器，测试网页JS的兼容性（console未定义兼容测试）

文章目录一、痛点：IE兼容测试二、关于IETester 三、IETester下载四、写个html测试js的console接口五、测试结果六、js兼容处理一、痛点：IE兼容测试之前使用.Net的Winform桌面应用框架做了一个PC版的迷你浏览器（使用IE内核），方便拉起网页支付。有用户反馈打开支付页面报了如下的错：“console”未定义到底是多么老旧的I...

linux下搭建nginx及配置

文章目录下载nginx 解压nginx资源包准备编译环境安装编译查找安装路径并启动nginx 浏览器访问下载nginx 下载地址：https://nginx.org/en/download.html 这里用的是nginx-1.16.1版本解压nginx资源包准备编译环境安装编译查找安装路径并启动nginx 浏览器访问 http://IP...

腾讯云+tipask快速搭建基于laravel的CMS网站

一、购买腾讯云服务器，服务市场->基础环境->选择WordPress平台镜像二、按照tipask教程安装 tipask官方教程地址https://wenda.tipask.com/article/22 官方教程对新手不太友好，我整理如下： 1.ftp上传文件云服务器镜像装载完毕后，浏览器访问服务器公网ip，点击获取权限后会下载服务器相关的文件浏览器访问host url，根据所给的...

ElasticSearch入门教程

什么是ElasticSearch 基于Apache Lucene构建的开源搜索引擎采用Java编写,提供简单易用的RESTFul API 轻松的横向扩展，可支持BP级的结构化和非结构化的数据处理可应用场景海量数据分析引擎站内搜索引擎数据仓库一线公司实际应用场景英国卫报 - 实时分析公众对文章的回应维基百科、GitHub-站内实时搜索百度 - 实时日志监控平台安装 Windows...