部署 Vue 项目到 Tomcat 并使用 Nginx 转发请求

部署 Vue 项目到 Tomcat 并使用 Nginx 转发请求

使用描述

• 将项目部署到 Tomcat
• 使用 Nginx 对请求进行转发
• Vue 项目使用 Vue cli3
• 项目部署到阿里云服务器
• 建议使用本地环境先进行测试
• 解决了常见的刷新 404 问题

打包项目

• 修改vue.config.js

  • 设置打包的输出文件夹名、静态资源文件夹名和publicPath

    	outputDir: 'myVue',
    	assetsDir: 'static',
    	publicPath: '/',
    

  • 将代理proxy设置为{}，当部署到服务器时就不存在跨域问题，因此无需proxy配置

• 修改router/index.js
  • 在路由配置上添加 base: '/myVue/'，此处 base 的值与之前设置的 outputDir 的值一致(多了俩/)
• 注意：此处 mode 选择的是 history，在后面会需要多一步设置，如果使用的是 hash 可以忽略之后的相关设置
• 执行打包
  • 在当前项目下执行

    	npm run build
    

• 打包完成后会在项目目录下得到一个与你之前设置的 outputDir 名称一致的目录

部署到 Tomcat

• 首先确保服务器上的 Tomcat，正常运行，如果有多版本的 Tomcat 明确使用的是哪个版本。

• 将打包生成的文件夹整体上传到 tomcat 的 webapps 文件夹下

• 注意：以下配置是为了解决 Vue的history模式的问题（刷新界面会出现404），如果使用的是 hash 模式可以忽略以下内容：

  • 进入到你的项目文件夹(即例如：webapps/myVue)，新建 WEB-INF 文件夹
  • 再在 WEB-INF 中新建 web.xml 文件
  • 添加如下内容：

  	<?xml version="1.0" encoding="UTF-8"?>
  	<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  	    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
  	                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  	    version="3.1" metadata-complete="true">
  		<error-page>
  			<error-code>404</error-code>
  			<location>/index.html</location>
  		</error-page>
  	</web-app>
  

配置 Nginx 转发

• 在配置文件的 server 下添加 location
• 此处以 myVue 项目为例：

	location ^~ /myVue{
		proxy_pass http://localhost:8080;
		proxy_redirect  off;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
	}

• 注意： 配置的方式并不唯一，此处是单独给配置一个转发，因为 80 端口还负责监听其他请求并转发，如果没有也可以直接配置在 location / 下，或者重新监听一个端口作为项目的请求转发。

写在最后

• 此处整理了一下使用 Vue cli3 发布部署 Vue 项目的流程，过程中自然会遇到很多问题，目前尚未理解的包括但不限于如下内容：
  • pubilcPath 的配置具体会有什么影响，目前知道的常见参数有 ""，'/'，'./'
  • mode 的 history 模式会导致 刷新界面 404 的内在原因是什么
• 部署成功只是Vue项目上线，最基础的一部分，很多问题在部署上服务器才会出现，下一篇会说说自己整理的关于Vue项目的优化整理。