vue项目部署到tomcat中

说明

对于前后端分离项目，后端通常直接用springboot以java -jar启动，或者打成war包放置tomcat中；前端工程使用webpack打包在dist文件夹下，再将statis和index.html放置到nginx等服务中。对于后端开发者而言，将后端和前端统一部署在tomcat下的有点如下：

• tomcat包解压即用非常方便
• 无需再安装nginx服务（若机器上无nginx或无sudo权限等，使用起来比较繁琐）
• 解决跨域问题，tomcat同一ip同一端口

前端配置

在tomcat下新建一个工程文件夹，如anty-fe

/home/wanghongbing/tomcat/webapps/anty-fe

anty-fe就是项目名称，访问时ip:port/anty-fe即可

修改两个文件：

1. src/router/index.js中添加 base: ‘/anty-fe’, 如下：（和tomcat名对应）

export default new Router({
  base: '/anty-fe',
  routes: [
    {

2. config/index.js中修改 assetsPublicPath : ‘/’ 为 assetsPublicPath : ‘/anty-fe/’’ （和tomcat名对应），如下：

build: {
  assetsSubDirectory: 'static',
  assetsPublicPath: '/anty-fe/'

说明：

• 改动1是为了和tomcat路径对应
• 改动2是由于vue webpack打包后生成dist/static和index，是为了能够找到static

启动tomcat即可访问，如：
http://10.15.64.xx:8090/anty-fe/

参考文献：https://my.oschina.net/bugkiller/blog/1787482