Vue2:用node+express部署Vue项目

本文介绍了如何使用npm构建Vue项目并生成静态文件,随后部署到基于node.js和express的服务,包括设置静态文件夹、修改配置以及启动和访问部署后的服务。
摘要由CSDN通过智能技术生成

一、编译项目

命令

npm run build

执行命令后,我们会在项目文件夹中看到如下生成的文件
在这里插入图片描述

二、部署Vue项目

接上一篇,node+express编写轻量级服务
1、在demo中创建static文件夹
在这里插入图片描述
2、将dist目录中的文件放入static
在这里插入图片描述
3、修改server.js文件
关键配置:app.use(express.static(__dirname+'/static'))

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

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	]
	response.send(students)
})

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为:http://localhost:5000/students');
})

4、启动服务

node server

5、访问
在这里插入图片描述
注意:
这里直接访问的路径是http://localhost:5000/
等价于访问http://localhost:5000/index.html
所以,体会下,vue项目编译后生成的index.html的作用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值