使用Express搭建一个本地服务运行前端项目

express官网

安装express

由于express是基于nodejs，所以首先需要安装nodejs，安装教程网上到处都是，自行查找！

执行安装命令

代码语言：javascript复制

npm install express -g

安装装载器 [4.0之前的不用安装这个]

代码语言：javascript复制

npm install express-generator -g

检查是否安装成功

代码语言：javascript复制

express --vserion

创建一个express项目

代码语言：javascript复制

express -e projectName //项目名字

如下图

进入项目

代码语言：javascript复制

cd expressCsdn

安装依赖

代码语言：javascript复制

npm install

服务启动

代码语言：javascript复制

npm run start

如下图

访问默认3000端口如下图

配置一个get请求的接口

打开项目app.js文件,添加哟个get请求

代码语言：javascript复制

//本地的一个json数据文件
var datas = require("./datas.json")

app.get('/csdn', function (req, res) {
  res.send(datas)
})

app.js 同级目录创建一个json的数据文件

代码语言：javascript复制

{"data":true,"code":1,"success":true,"desc":null}

验证接口是否可以请求通如下图：

使用postman测试

部署vue-dist包文件

需求说明

下面进行的操作根据自己的业务需求进行，如果你的vue或者别的框架的项目是基于express进行运行的，那么你可以完全直接在express里面进行创建一个vue项目，如果只是将express作为一个服务器提供给你的同事或者方便自己测试的话，那么你可以独立出来一个vue或者别的框架的项目进行打包，直接将包文件扔到express框架里面的人任何位置，根据下面的步骤将dist包文件位置暴露给express即可！

创建一个vue项目 [下面全部是vue默认执行命令，自己可以根据需求进行更改webpack配置]
进入到public文件夹 [可以是别的文件夹]

代码语言：javascript复制

cd public

初始化一个vue项目

代码语言：javascript复制

vue init projectName

进入项目

代码语言：javascript复制

cd projectName

安装vue项目依赖

代码语言：javascript复制

npm install

启动项目

代码语言：javascript复制

npm run dev

打包

代码语言：javascript复制

npm run build

更改express执行文件地址

代码语言：javascript复制

app.use(express.static(path.join(__dirname, 'public/vuePro/dist')));

运行当前express （我这里端口改为了7000）如下图：

更改端口号

打开express/bin/www

代码语言：javascript复制

var port = normalizePort(process.env.PORT || '7000'); //写自己需要的端口号

写到后面

以上就是express的最基础的使用，可以满足日常我们搭建服务使用，可以自己本地接口进行模拟测试，当然如果你觉得比较麻烦，完全可以使用mockjs进行模拟数据的输出！后续更加高级的用法，我会持续更新，谢谢阅读，打完收工！拜了个白！

express vue.js node.js http javascript

0 人点赞