vue+nginx部署，并调用跨域接口

1.修改主入口组件，src\ main.js

如果想部署后的程序访问的主入口是自己指定的组件，而不是vue项目默认的组件，则调整主入口main.js，如下图

2. 修服务器端口、域名和路径，config\ index.js

将host值修改为服务器对应的ip或域名，port修改为自己对应的端口号

将assetsPublicPath值由原来的”/”改为”./”，productionSourceMap值设置为false

3.修改build/utils.js文件

在enerateLoaders方法中找到如下图位置，加上publicPath:'../../'

因为url-loader处理后的文件是在static目录下生成fonts目录下的文件，全部样式文件打包在css目录下app.***.css文件中。不增加的话会报element-icon.woff和element-icons.ttf文件404

5.修改部署模式的后台请求接口

如果vue写的前端代码和要请求的接口不在同一个域下部署则需要执行这一步，如果是同一个域的话则无需管这一步了

解决方法有两种：1.在vue前端项目同域下部署一个java项目，vue项目调这个同域的java接口，通过这个同域的java进行转发

2.通过nginx做反向代理的方法。

因为我使用的是第二种方法通过nginx做反向代理，所以这里说说我的做法。

在网上下载nginx，然后解压，打开nginx\conf\ nginx.conf文件添加对应的代理配置

5.1为了兼容开发环境和生产环境的后台请求配置

为了避免开发在开发环境和生产环境切换的时候来回修改这个请求配置，所以使用vue项目提供的全局变量process.env。在使用之前需要配置项目中的\config\ dev.env.js（开发模式配置文件），\config\ prod.env.js（生产模式配置文件），分别在这两个配置文件中加入nginx配置的需要转发的跨域地址。（如有更好的方式，请提供一下，谢谢）

\config\ dev.env.js：

\config\ prod.env.js

上面两个文件的配置需要对应nginx中配置的转发代理（我的nginx配置如下图）

上面的nginx的配置，意思是：当监听到server_name + listen（对应的ip和端口），发出的请求中已location名字开头的，将会转换为proxy_pass配置的地址，进行请求操作。

通过上面配置后代码中请求接口数据的写法需要修改一下，如下图：

解释：
process.env.API_HOST：开发模式下读取\config\ dev.env.js中的API_HOST值，生产模式下读取\config\ prod.env.js中的API_HOST值
process.env.API_HOST2和process.env.API_HOST3根process.env.API_HOST的解释相同

统一这样写后开发和部署就不需要来回切换接口的配置信息，vue项目自己会自动判断开发和生产模式的（强烈建议用这种方式）

注意vue项目和java接口项目是不用放到nginx上跑的，nginx只是做一个代理转发功能而已

6.打包部署

把vue编译后的dist文件夹的内容拷贝到tomcat根目录下启动tomcat，然后启动nginx即可，可以打开nginx的目录，双击nginx.exe既可

也可以使用cmd命令，执行start nginx

通过上面两个方法都可以看到一个黑色窗口一闪而过，表示nginx已经启动成功，打开任务管理器可以看到有两个nginx的进程

如果想关闭nginx的话执行，nginx -s quit或nginx -s stop，

stop表示立即停止nginx,不保存相关信息

quit表示正常退出nginx,并保存相关信息

重启(因为改变了配置,需要重启)

nginx -s reload

完成上面步骤后，就可以开始打包项目了，执行命令npm run build然后在项目中会生成dist文件夹。直接将dist文件夹里面的文件拷贝到tomcat的webapp目录下

 

到这里为止，配置准备工作已经完成了，接下来就是启动tomcat访问项目了。

如果在访问项目的时候报浏览器报502，打开nginx的日志显示报错信息为：upstream sent too big header while reading response header from upstream

那么就是nginx的配置文件nginx.conf文件中少了配置

proxy_buffer_size 64k;
 proxy_buffers   32 32k;
 proxy_busy_buffers_size 128k;

加上上面三句话重启nginx，再访问项目就不会报错了。到这里大功告成了