文章目录
前言
场景描述:
第一阶段开发过程:项目前期前后端均使用idea进行开发和调试,项目中各个模块均可以正常访问;
第二阶段测试过程:经过第一阶段的开发和自测过程后,进行项目发布到测试环境过程中出现了一系列问题。
一、前端vue项目打包
1.安装Node.js
安装必要的软件,前端使用的是vue,需要安装node.js, 安装教程可参考:
https://www.runoob.com/nodejs/nodejs-install-setup.html
2.项目打包
前端vue项目打包生成dist 文件夹,dist文件夹中就是打包好的静态文件;
代码如下:
// vue 项目打包命令
npm run build
打包文件如下:
二、服务器端
1.服务器端安装nginx
服务端安装nginx,使用nginx做为web的静态服务器,安装教程参考:
https://www.runoob.com/linux/nginx-install-setup.html
需要修改的配置文件位置如图:
2.静态文件上传到服务器
提示:实际项目中并非手动将静态文件发送到服务器中,而是采用jenkins方式打包发布,具体步骤可自行 baidu.com。
使用shell将打包好的文件上传到服务器中,存放位置自己可以根据自己公司要求或者自己的喜好放置。本文放置到nginx默认的放置的静态文件的目录中(html文件夹中)。
文件放置位置如图:
3.配置nginx.conf 文件
通过配置nginx.conf 文件映射到我们放置静态文件的文件夹中
配置文件修改如下:
// 打开配置文件
vim conf/nginx.conf
// 进行编辑,在打开的文件中,按 i 可以进行编辑
i
// 将 root 后面的html文件夹修改为自己上传的前端项目的文件夹
// 本文中使用的是wacp,并且我的文件夹是在html文件夹下,所以文件目录是 html/wacp
// 如果是其他的文件夹,通过 pwd 命令获取到文件路径,将文件路径拷贝到root 后面即可
// 退出编辑模式:按下键盘中esc键
esc
// 保存修改:shift + :+ wq 保存配置
// nginx 刷新配置文件:在nginx 目录下,进入sbin目录中执行以下命令
./nginx -s reload
// 此时可以通过 服务器ip | 域名 在浏览器中进行访问,端口默认是80,可以不用添加
配置文件修改图片如下:
4.出现404问题
nginx配置文件增加配置如下:
// 解决post请求出现404问题,增加下面配置信息
try_files $uri $uri/ /index.html;
nginx配置文件增加配置如图:
5.出现405问题
当使用post方式请求后端接口的时候会出现405 not allowed
nginx配置文件增加配置如下:
// 解决post请求出现405问题,增加下面配置信息
error_page 405 =200 http://$host$request_uri;
nginx配置文件增加配置如图:
6.出现(We’re sorry but “XXX” doesn’t work properly without JavaScript enabled. Please enable it to continue)问题
请求后端接口的时候出现以上的报错,在网上很多说将router 修改history模式改成hash模式,但是我这边修改并不能生效。原因是nginx不能正确的解析到后端的地址。
nginx配置文件增加配置如下:
// ip 是后端项目发布的服务器的ip,port是后端允许访问的端口,即项目端口
// api 是前端使用的请求后端的时候的基础uri
location ^~ /api/ {
proxy_pass http://ip:port/;
}
// 保存并刷新nginx 配置
./nginx -s reload
前端配置如图: