---

前言

场景描述：
第一阶段开发过程：项目前期前后端均使用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

前端配置如图：

---

总结