1.vwe开发之创建express后台服务器

最新推荐文章于 2020-12-05 13:36:49 发布

asa-x

最新推荐文章于 2020-12-05 13:36:49 发布

阅读量173

点赞数

分类专栏：前端开发文章标签： express webpack

本文链接：https://blog.csdn.net/u010714901/article/details/90670373

版权

前端开发专栏收录该内容

21 篇文章 0 订阅

订阅专栏

构建一个express服务器

请参考Creating a Node Express-Webpack App with Dev and Prod Builds

你可以理解为这是翻译版。

创建一个项目叫 express-webpack
1. 手动新建项目 express-webpack
2. 在当前项目下执行下面代码
```
mkdir express-webpack
cd express-webpack
```

npm初始化项目，生成package.json

npm init -y   //-y 选择表示默认是，跳过输出

安装 Express
```
npm install --save express
```

创建一个Express Server

在根目录下新建一个server.js，代码如下

  //引入需要的包
  const path = require('path')
  const express = require('express')
  //实例化一个express对象，用来创造一个http server
  const app = express(),
    DIST_DIR = __dirname,   //__dirname表示当前脚本运行的根目录
    HTML_FILE = path.join(DIST_DIR, 'index.html')
  app.use(express.static(DIST_DIR))  //定义静态资源的入口
  //任何处api 请求都发送默认入口页面
  app.get('*', (req, res) => {
    res.sendFile(HTML_FILE)
  })
  //定义服务器端口，参数传入的或者是8080
  const PORT = process.env.PORT || 8080
  //开启服务器端口的监听
  app.listen(PORT, () => {
    console.log(`App listening to ${PORT}....`)
    console.log('Press Ctrl+C to quit.')
  })

建立3中的入口页面，在根目录下建立index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Express and Webpack App</title>
    <link rel="shortcut icon" href="#">
</head>
<body>
    <h1>Expack</h1>
    <p class="description">Express and Webpack Boilerplate App</p>
</body>
</html>

建立运行脚本，在package.json中加入脚本

 "scripts": {
   "start": "node ./server.js"
 },

最后的package.json为

 {
   "name": "express-webpack",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "node ./server.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "express": "^4.16.4"
   }
 }

当前目录如下：

node_modules
index.html
package-lock.json
package.json
server.js

运行脚本，

   npm run start

控制台输出如下：

App listening to 8080....
Press Ctrl+C to quit.

打开网页，输入地址：http://localhost:8080/
页面显示如下：

Expack

Express and Webpack Boilerplate App

下一篇：2.vwe开发之用webpack打包前端

asa-x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.vwe开发之创建express后台服务器

构建一个express服务器请参考Creating a Node Express-Webpack App with Dev and Prod Builds你可以理解为这是翻译版。创建一个项目叫 express-webpack手动新建项目 express-webpack在当前项目下执行下面代码mkdir express-webpackcd express-webpack...
复制链接

扫一扫