vue项目部署方式:tomcat部署和nginx部署

Posted 2023-03-15

参考技术A

一般项目前后端分离得话，都会用nginx作为反向代理转发的。
因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理.

其中 vue+webpack+vue-router(history) 部署到nginx服务器下，非根目录，前后端怎样配置文件 这篇文章详细说明了怎么打包vue项目,记得修改config下的index.js文件.
修改为:(只显示修改的部分)

关于nginx的配置,一定需要注意第二篇文章说到的问题;

proxy_pass转发的路径后是否带 “/” 的意义都是不一样的,假设有请求 http://true_server/test/index.html ,如果配置是第一种情况,不带"/"的话,那么访问的实际是
http://t6:8300/index.html ,直接访问根路径,如果带"/",那么访问的实际是" http://t6:8300/test/index.html ",以"/test"作为根路径.
具体配置如下:

因为项目上线，一般需要添加项目名，并且消去vue-router产生的#号，需要在router的配置下，在本项目是router->index.js下配置：

在打包后,会生成dist文件，文件下由以下部分组成：

至此，整个vue项目算是配置完毕，但是部署到tomcat下会出现访问图片 没有带根路径 的问题，如果你引用图片的方式和我一致，如下：

那么可以尝试的解决方法是，重新配置tomcat的；

首先在tomcat的webapps新建文件夹，文件夹名称和上面配置的根路径一致，即为webSite，然后将打包生成的dist文件夹里面的文件复制到webSite下，并且新建文件 WEB-INF/web.xml:
项目结构为：

找到tomcat的conf文件下的server.xml，配置静态服务,找到HOST标签：
这里的配置为：

参考： tomcat配置静态服务

增加这个文件是因为，解除#号，参考官网：
去除vue项目的#号
这里就直接丢配置了：

vue cli3项目打包部署到tomcat服务器运行

参考技术A 步骤：
一、找到文件vue.config.js，没有则自己创建一个

二、编写vue.config.js的内容

三、修改路由方式，修改为hash，文件位置自己找，vuecli3中在router.ts文件中

四、添加空路由

找到编译好的文件夹，如果作为独立项目，直接拷贝后放到Tomcat里即可，如果是放到另外一个项目中使用，则拷贝到其它项目中去

七、适配到EOS中使用
7.1、改变原EOS项目中的首页配置
在webapps\default\WEB-INF\web.xml中配置

7.2、修改原EOS项目中的登录成功的跳转页，也是项目主页
在webapps\default\coframe\auth\index.jsp中配置