vue3.0单页面项目nginx+node服务器上线

流程

1. 前端配好代理（跨域），打包
2. 后端写好接口，配置服务器，连接数据库
3. nginx配置，监听服务器端口，映射端口到域名等配置

问题（直接滑到nginx部分即可）

1. 页面重定向（rewrite），配好nginx之后，项目能跑，但是一刷新页面就gg了，显示模块找不到（）
2. 请求头headers无缘无故丢失

前端

前端项目代码就不展示了，没卵用，就贴个配代理的，解决跨域问题
vue.config.js

// 8088是我自己设置的node服务器端口，复制改为自己的
const port = process.env.PORT || 8088;
module.exports = {
  productionSourceMap: false, // 不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  devServer: {
    historyApiFallback: true, //资源找不到跳转index.html
    // open: true,
    // 让前后端http请求都转到node的8088端口，而不是前端的8080端口
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:' + port + '/', // 后端接口地址
        changeOrigin: true, // 是否允许跨越
        ws: true, //webscoket
        pathRewrite: {
          '^/api': '/api' // 重写,
        }
      }
    }
  },
}

后端

我用的是express框架，其中代码有些插件需要你自己 “npm install 【插件】“安装一下,api代码就不展示了

1. server.js(配置服务器)

const express = require('express')
const bodyParser = require('body-parser') // 处理前端post过来的数据
const path = require('path')
const router = require('./Interface')
const timeout = require('connect-timeout') // 请求超时
const app = express()

require('./dataBase') // 连接数据库

app.use(express.static(path.join(__dirname, 'dist'))) // 初始启动的html文件夹

app.use(bodyParser.json()) // 解析 x-www-form-urlencoded,extended为false时数据为String或Array,true则是所有数据
app.use(bodyParser.urlencoded({
    extended: true
}))

// 请求超时处理
app.use(timeout('3s'))
app.use(haltOnTimedout)

function haltOnTimedout(req, res, next) {
    if (!req.timedout) {
        //   res.status(503).send()
        next()
    } else {
        res.json('请求超时,请通知服务器人员检查服务器！')
    }
}
app.use(router) // 运行api

const port = process.env.PORT || 8088;
var host = process.env.host || '127.0.0.1'

app.listen(port, () => {
    console.log(`
    Serve is running~
    network:http://${host}:${port}`)
})

2. dataBase.js(连接mongodb数据库)

const mongoose = require('mongoose')

if (process.env.NODE_ENV === "production") {
  mongoose.connect('mongodb://localhost:27017/informationSystem') // 此处改为mongodb Atlas上的字段码
} else {
  mongoose.connect('mongodb://localhost:27017/informationSystem')
}
const conn = mongoose.connection
// 1.4. 绑定连接完成的监听(用来提示连接成功)
conn.on('connected', function () {
  console.log('mongodb启动成功')
})
conn.on('error', console.error.bind(console, '连接数据库失败'))

module.exports = mongoose

nginx(重点)

我的nginx版本是window系统下的nginx-1.16.1，下载地址：http://nginx.org/en/download.html

配置： 在nginx-1.16.1\conf路径下的nginx.conf里面的server对象下修改

问题1 主要是缺了这句话：

    try_files $uri $uri/ /index.html;

问题2 解决：
丢失原因是nginx会忽略带有_下划线的字符串，应该有它的原因

underscores_in_headers on;

nginx.conf完整配置（可直接粘贴复制到你的配置）,server_name修改为你的域名/端口
显示模块找不到的原因：我的理解是vue打包后只有index.html页面，当你路由跳转到其他页面，或者不在域名地址刷新的时候，路由就会在打包完的文件夹（dist）下找路由文件，但是压根就没有，所以要重定向到index.html，通过这个html查找路由

worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    gzip  on;
    #均衡
	upstream backserver {
	ip_hash;
	server 127.0.0.1:8088;
	server 127.0.0.1:18088;
	}
    server {
        listen       80;
        underscores_in_headers on;
        server_name  www-xxx-xxx;
	    include /etc/nginx/default.d/*.conf;
        root   /Users/Administrator/Desktop/vue-erp/server/dist;
            index index.html index.htm;
            location / {
            #重定向地址
            try_files $uri $uri/ @router;
            index  index.html index.htm;
            }
         #对应上面try_files的@router
		location @router {
            rewrite ^.*$ /index.html last;
        }
        #监听请求地址，下面的api设为你的请求地址
        #backserver对应上面的backserver
        location ~ /api/ {
           proxy_pass http://backserver;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

• 启动node服务器
• 配置完nginx后，命令行 ./nginx -s reload 一下nginx