项目打包后配置到node服务器
1.将项目进行打包
npm run build项目根目录下会多出一个打包好的由.js .html .css文件组成的dist文件夹,如图
2.搭建node微型服务器
新建文件夹命名"node服务器",npm init进行初始化,起好包名字node-server然后一路回车,目录下多出package.json文件,
npm i express搭建node服务器
3.打包好的项目配置到服务器
在这个新建文件夹根目录下新建static文件夹,再将刚才打包好的dist文件夹下文件放入这个static文件夹,
新建server.js文件,去配置服务器,如图
4.前端开发配置的代理服务器失效
// 将来打包可能会有这几种情况： // 1. 打包好后，直接给后端，让后端进行静态托管 // 我们发现直接打包放到后端，会导致请求可能会 404 ，原因是没有走代理 // 我们在前端进行开发的时候，代理是 webpack 帮我们进行的，当打包后，是没有这个代理的 // 1.1 如果接口服务器就是静态资源服务器，只需要把 '/api' 删除，请求会自动请求相同域名下的接口 // 1.2 如果接口服务器不是静态资源服务器，需要把 '/api' 修改为真正请求的地址，重新打包,但是这个时候一定会跨域 // 需要让后端做对应的配置转发 -- 至于怎么做，不用管 -- 其实说白了，也只是在静态资源服务器进行 一次代理
在node配置代理服务器,下载中间件
npm i connect-history-api-fallback
然后在server.js中引入和使用这个中间件:
server.js:
const express=require('express')
const { createProxyMiddleware } = require("http-proxy-middleware"); //导入代理服务器
const app=express()
app.use(
"/api",
createProxyMiddleware({
target: "http://192.168.113.249:8081/cms",
changeOrigin: true,
pathRewrite: (path) => path.replace("/api", ""),
})
);
app.use(express.static(__dirname+'/static'))
app.get('/person',(req,res)=>{
res.send({
name:'tom',
age:18
})
})
app.listen(5005,(err)=>{
if(!err) console.log('服务器启动成功了')
})
5.需要在server.js文件配置history中间件来解决前端路由history模式下刷新出现404的局面
(可以在npmjs.com网站搜索connect-history-api-fallback,查看这个中间件,然后回到vscode终端输入下面这个命令安装这个中间件)
npm i connect-history-api-fallback
然后在server.js中引入和使用这个中间件
server.js:
const express=require('express')
const history=require("connect-history-api-fallback"); //导入history中间件
const { createProxyMiddleware } = require("http-proxy-middleware"); //导入代理服务器
const app=express()
app.use(history())
app.use(
"/api",
createProxyMiddleware({
target: "http://192.168.113.249:8081/cms",
changeOrigin: true,
pathRewrite: (path) => path.replace("/api", ""),
})
);
app.use(express.static(__dirname+'/static'))
app.get('/person',(req,res)=>{
res.send({
name:'tom',
age:18
})
})
app.listen(5005,(err)=>{
if(!err) console.log('服务器启动成功了')
})
