项目打包后配置到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('服务器启动成功了')
})

 6.在终端运行node .\server.js开启服务器，然后浏览器输入localhost:5005打开项目