vue项目部署tomcat

has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values，项目部署tomcat

本文介绍了将Vue项目打包为WAR文件并部署到Tomcat的完整流程。主要内容包括：1) 通过npm命令打包Vue项目生成dist文件夹；2) 创建WEB-INF目录并配置web.xml处理404路由问题；3) 使用jar命令将静态文件打包为WAR格式；4) 提供自动化打包脚本优化流程；5) 注意事项如publicPath配置、路由base设置等。该方法解决了企业环境中Vue项目部署到Java应用服务器的需求，实现了前后端统一部署管理，同时确保了Vue路由在History模式下的正常工作。

[ RuoYi ] 若依前后端分离 RuoYi-Vue 项目 war 包 Tomcat 项目部署

vtomcat 部署 vue

前端Vue项目上线部署操作。

将 Vue 项目部署到 Tomcat 的方法 1. Vue项目路由配置 项目上线，一般需要添加项目名，并且消去vue-router产生的#号，需要在router的配置下，在本项目是router->index.js下配置： import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); export defau...

我的原创地址：https://dongkelun.com/2018/11/19/vueCliCreateProject/ 前言 最近一直在写前端，用的是JSP，但是很多人都说JSP已经过时了。既然做了几个月的前端，那就把前端学的好一点，学点新技术，跟上潮流。感觉Vue挺火的，所以这几天学了一下Vue，开始看的官方文档，然后直接用GitHub上比较火的项目进行学习，本地跑起来，看看效果、源码和代码结...

1、将前端打包后的文件 内容拷贝到Tomcat的webapps下，可以直接丢入一个文件夹，访问时链接需要文件夹名称。为了链接的简洁可以直接放在ROOT下。2、此时可能遇到的问题一、启动后访问不到，页面F12显示如下图，那么就需要检查一下配置的访问路径是否对的。当前我是把dist文件夹放在webapp下。需要在前端代码配置一下访问路径加上dista、首先打包之前需要修改config文件夹下的inde...

问题： 只有一个服务器，但是需要在服务器中同时部署多个vue项目，将所有的vue项目静态文件放到tomcat的webapp目录下是不可取的，而在不使用Nginx的情况下，就可以利用Tomcat对这些vue项目进行代理。 解决方法： 假设Tomcat在服务器中的路径为： /www/server/tomcat 1、在 /www/server 目录下创建两个新的文件夹，分别取名为 vue1、vue2。 将第一个vue项目打包生成的dist文件放置在vue1文件下， 将第二个vue项目打包生成的dist文件放置在v

1 首先需要修改vue项目中的Route中的index.js文件，新增mode:‘history’,base:’/vue/' export default new Router({ routes: [{ path: '/', mode:'history', base:'/vue/', name: '', component: login, hidden: true, meta: {

1、tomcat介绍 2、下载tomcat 3、启动tomcat 4、打包vue项目 5、tomcat部署vue项目 1、tomcat简介 tomcat 是免费的web服务器。不使用tomcat也可以打开html页面，但是可以在浏览器的地址里看到file:d:/test.html这样的格式，是通过打开本地文件的形式打开的。使用tomcat后，可以这样127.0.0.1:8080/test.html像访问一个网站似的，访问一个html文件了。 2、下载tomcat https:/...

阿丹有话说： 之前在写spring-boot项目的时候是直接写的jsp页面直接打成war包来运行。使用到了tomcat,而且简单方便，但是美中不足就是动画演示以及页面没有办法做的非常美观。自从开始写前后端分离的项目（微服务等）之后，发现element-ui是真的好用。现在想给vue的项目打包部署在自己的服务器上的时候发现了一些不一样。经过两天的学习以及摸爬滚打 ，学到了一些心得。给大家总结出来一个文章。方便大家，也想让大家少走一些弯路（和我一样）。

一. 思路 使用 npm run build命令打包完成之后，会出现一个dist文件夹，里面有static文件夹和一个index.html文件，如果我们要部署在tomcat上面，即需要将dist文件放在tomcat里的webapps文件夹下，再用docker执行下重启指令，然后在本地起的vue项目就可以通过链接外部访问了。别人访问你本地的vue项目就不需要通过你的ip地址，在同一网段下才能访问了。 二. 步骤 1.在vue项目的vue.config.js文件中module.exports导出的对象中添加 p

vue项目打包为dist 在tomcat的webapps下新建文件夹，比如myvue 将dist内的index.html和static上传到myvue目录下 浏览器输入http://[ip]:[port]/myvue即可访问

修改路由配置src/router/index.js，增加配置base‘/Vue/’，如果这里不配置，会导致部署的项目首页访问一片空白，但不报错，且引入的文件有正常加载。执行npmrunbuild，将打包生成的dist目录下的所有东西粘贴到Tomcat/webapps/路径下新建一个Vue文件夹，Vue是自定义的项目名，访问路径格式>>ipport/Vue，例如http//localhost8080/Vue/，即可访问到Vue项目。前端项目中使用到了代码。...

2、解压tomcat文件,可以通过快捷键(command+shift+G)把它放入/Library(资源库中)在 Tomcat 下 webapps→test（test项目文件名）→创建WEB-INF→创建web.xml。6、npm run build后生成dist文件，放到tomcat中webapps中，以labo为例。5、开启Tomcat，终端输入sudo sh ./startup.sh，输完回车。至此两个问题解决完成！4、授权bin目录下的所有操作：终端输入。3、在bin目录下打开终端。

总结： 修改vue项目相关配置，cmd进入到vue项目文件夹中，执行npm run bulid命令，将生成的dist文件夹下的内容，存放到Tomcat中的webapps新建文件夹下，运行Tomcat服务器，通过IP地址:端口\新建文件夹名称【http://192.168.10.127:8080/jkpt/】，即可访问vue项目。 步骤一：修改vue项目相关配置 （1）在vue.config.js文件中module.exports导出的对象中添加 publicPath: ‘./’ 的配置项。 （.