若依vue前端模块部署到tomcat

前言

一般部署前端应用，使用nginx作为服务器，有时候没有nginx，只有tomcat，这种情况需要对代码进行一些调整

修改步骤

1. 在tomcat中创建项目

进入tomcat的安装目录中，找到webapps文件夹，在webapps文件夹里创建一个项目文件夹,名字为：vue-page

2. 修改vue.config.js

打开vue.config.js文件，找到publicPath，将生产环境的路径改为 /vue-page，也就是tomcat中文件夹的名字

3. 修改vue路由

打开router下的index.js，配置单页应用的基路径，配置为 /vue-page

4. 修改接口地址

打开.env.production，修改VUE_APP_BASE_API为实际的接口地址

说明：这个不一定需要改，是实际情况决定是否修改

5. 打包构建，复制文件

用npm命令打包构建完成后，将项目下的dist文件夹里的所有文件，复制到tomcat里创建的vue-page文件夹里头

6. tomcat项目里创建web.xml

在tomcat里vew-page文件夹里创建一个文件夹，名字为：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">
    <display-name>vue-page</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>