Vue项目部署到Node服务器

Vue项目部署到node服务器步骤

1. 编译Vue项目文件

npm run build

2.创建node服务器

2.1 创建服务器文件夹并进入

2.2 初始化服务器目录

npm init

//安装express
npm i express

2.3 创建server.js文件

2.3 编写服务器文件

const express = require('express')
//创建服务实例
const app = express()

//创建/person接口
app.get('/person',(req,res)=>{
  res.send({
    name:"tom",
    age:18
  })
})

//创建5005端口监听
app.listen(5005,(err) => {
  if(!err){
    console.log("服务器启动了");
  }
})

2.4 创建static文件夹,将vue编译文件放入文件夹下

2.5 server.js文件中加入一下代码

//指定静态资源
app.use(express.static(__dirname+'/static'))

注意: Vue项目使用history路径模式,需要单独处理刷新问题,node中的处理方式

- 引入connect-history-api-fallback
npm i connect-history-api-fallback
- 使用,必须在静态资源前使用
const history = require('connect-history-api-fallback')
//创建服务实例
const app = express()
app.use(history)
//指定静态资源
app.use(express.static(__dirname+'/static'))


版权声明:本文为weixin_42202992原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。