一.前期准备工作
在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项目就可以在浏览器中访问了!