用nodejs在本地部署前端项目

最新推荐文章于 2024-04-22 15:36:45 发布

zhouang770377

最新推荐文章于 2024-04-22 15:36:45 发布

阅读量4.8k

点赞数 6

分类专栏：技术分享文章标签：前端 javascript html

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

版权

技术分享专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以下均采用 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静态目录是一个很方便的做法，因为他里面的资源可以直接访问