01-发布部署-项目打包

  • npm run build
  • serve -s dist

-s 将其架构在 Single-Page Application 模式下，用于解决可能的路由问题

02-发布部署-本地预览服务

使用 express 创建一个本地 nodejs 服务，在使用 proxy 中间件做代理

  • 使用 nodejs 的 express 来设置代理
  • http-proxy-middleware
    • webpack dev server 用的也是这个 ```javascript / eslint-disable / const express = require(‘express’) const path = require(‘path’) const { createProxyMiddleware } = require(‘http-proxy-middleware’)

const app = express()

// 托管了 dist 目录 app.use(express.static(path.join(__dirname, ‘../dist’)))

app.use(‘/boss’, createProxyMiddleware({ target: ‘http://eduboss.lagou.com‘, changeOrigin: true }))

app.use(‘/front’, createProxyMiddleware({ target: ‘http://edufront.lagou.com‘, changeOrigin: true }))

app.listen(3000, () => { console.log(‘running…’) }) ```

03-发布部署-注意事项

关于接口跨域问题

  • 方式一：配置服务端代理
    • nginx
    • tomcat
    • apache
    • IIS？
  • 方式二：后台服务器启用 CORS 支持

    关于 HTTPS

    网站部署在 https 下，接口也必须是 https

    关于 PWA

    如果你使用了 PWA 插件，那么应用必须加设在 https 上，这样 Service Worker 才能被正确注册

    04-发布部署-部署说明

    项目部署地址：http://www.tommy666.icu:5050/#/login