流程
- 前端配好代理(跨域),打包
- 后端写好接口,配置服务器,连接数据库
- nginx配置,监听服务器端口,映射端口到域名等配置
问题(直接滑到nginx部分即可)
- 页面重定向(rewrite),配好nginx之后,项目能跑,但是一刷新页面就gg了,显示模块找不到()
- 请求头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代码就不展示了
- 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}`)
})
- 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