node express框架搭建微型服务器用于启动vue2项目

249 阅读1分钟

一.前期准备工作

在vue脚手架中输入命令

$ npm run build用于打包vue项目中的文件,生成dist文件夹,其中存放html,css,js文件和一些静态资源

二.创建项目

创建demo文件夹,进入cmd命令行工具

$ npm init 初始化,将文件夹变成一个合法的包

项目需要命名 package name : 输入项目的名字。例如vue_test ,之后一直按回车键

然后安装express

$ npm i express

随后demo文件夹中出现了一些文件

在demo文件夹中新建服务器主文件 serve.js

在其中进行编辑

//使用commonJs的语法引入express包
const express = require('express')
//创建一个app 服务实例对象
const app = express()
//配置一个后端路由,数据随意
app.get('/person',(req,res)=>{
    res.send({
        name:'sun',
        age:18
    })
})
//端口号为5005
app.listen(5005,(err)=>{
    if(!err) console.log('服务器启动成功了')
})

启动服务器

$ node server

在demo中创建static文件夹,用于存放vue打包后形成的静态资源

使app能够使用static中的资源需要在server.js中加入一句话

// const app = express()
app.use(express.static(__dirname+'/static'))

将vue脚手架生成的文件即dist中的文件放入static中

ctrl+c 先停掉服务器

$ node server 启动服务器

在浏览器中输入网址 localhost: 5005

vue项目就可以在浏览器中访问了!