tomcat启动vue项目

最新推荐文章于 2024-06-03 15:47:47 发布
最新推荐文章于 2024-06-03 15:47:47 发布
阅读量2k 收藏 1
点赞数
文章标签： tomcat vue.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jockha/article/details/121030594
版权

1.vue配置设置
vueTemp\vue.config.js中：
publicPath: process.env.NODE_ENV === “production” ? “/dist” : “./”,
outputDir: “dist”, // ‘dist’, 生产环境构建文件的目录
assetsDir: “static”, // 相对于outputDir的静态资源(js、css、img、fonts)目录

2.打包
npm run build

3.把打包好的项目放到tomcat的D:\worktool\apache-tomcat-9.0.45-windows-x64\apache-tomcat-9.0.45\webapps中

4.启动tomcat，路径为：http://192.168.1.61:8080/dist/#/login
ip改成自己的或则localhost，端口号为8080，tomcat的conf文件夹里可改端口

txSong123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tomcat部署vue项目（成功版）
凤舞九天的博客
12-01 1万+
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:/...
vue项目部署到Tomcat中
jcpp9527的博客
06-09 712
1，假设你要访问的项目名称为‘hms’ 2，在Tomcat的webapps下创建hms文件夹， 3，配置config/index.js文件，build: {} 选项里面 设置assetsPublicPath: './' ，否则访问时会出现空白页，页面刷不出来。 4. 使用vue-router的情况 当你在项目中使用vue-router的时候，就需要给src/router/index.js添点东西，如下面： export default new Router({ mode : 'history'
Tomcat上部署vue项目（详细）包括安装，配置vue的history模式刷新404问题
最新发布
Zhangwei557的博客
06-03 570
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目录下打开终端。
tomcat部署vue前端项目
m0_67392182的博客
05-15 4078
Tomcat建立文件夹 1.在webapps文件夹下建立JL文件夹 2.将vue项目中打包好的dist中的static和index.html复制到这个文件夹下 Vue项目修改请求的公共路径 1.vue.config.js修改打包时的公共路径 publicPath: process.env.NODE_ENV === "production" ? "/JL" : "/" Vue项目修改路由配置 base:process.env.VUE_APP_BASE_Title, //-------.
tomcat部署vue项目教程文档
意外金喜
06-10 7700
安装nodejs https://blog.csdn.net/zzwwjjdj1/article/details/51980082 全局安装@vue/cli 安装好nodejs后，打开命令行运行命令：npm install -g @vue/cli 目前vuecli版本为3.3，安装完cli后，命令行运行 vue --version可以看到。 根目录运行npm run build n...
tomcat运行vue项目，刷新后报404
sinat_34626741的博客
07-13 1322
背景：打包后的项目发给后台部署到tomcat/webapps/dist中，刷新页面报404 解析：一般项目放tomcat/webapps/ROOT/,因为里面有默认的WEB-INF,若放外面，需修改conf/server.xml中的配置才会打开页面； vue是单页面应用，当router使用history模式，URL是和正常的url差不多的，但vue-router设置的路径是虚拟路径，当后台没有配置支持时，刷新会返回404错误。 解决办法：tomcat的dist牡蛎添加WEB-INF文件夹，并添加文件w
vue打包为“.war”发布到Tomcat服务器
Sunshine_CSDN的博客
09-22 1049
idea中打包vue项目，tomcat中文乱码，tomcat发布程序，动态项目的目录结构
tomcat跨域访问
08-12
在现代Web应用开发中，前端框架如Vue.js与后端服务器如Apache Tomcat的交互是不可或缺的。然而，由于浏览器的同源策略限制，不同源的请求（即协议、域名或端口任一不同）会被阻止，这在开发过程中可能会导致前端与...
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
08-27
今天很郁闷，遇到这样一个奇葩问题，使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错误，折腾半天才解决好，下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的...
解决Vue在Tomcat8下部署页面不加载的问题
01-19
最新的项目刚刚用上Vue，遇到很多问题，在Tomcat下部署时出现了页面空白。 问题：路由 mode history 模式在 dev 模式下没有问题，在 build 模式页面空白，但静态资源能正常引用 原因：部署在Tomcat上时并没有在根...
vue-cli history模式实现tomcat部署报404的解决方式
10-16
使用`npm run build`命令将Vue项目打包，这会生成一个`build`目录，包含所有生产环境需要的静态资源。 2. **准备Tomcat部署**： 将`build`目录中的内容复制到Tomcat的Web应用程序目录下的一个子目录，例如`myvue1...
Tomcat访问项目，去掉项目名配置
01-09
在Tomcat启动时会去webapps下访问默认ROOT目录下的应用程序，这就导致你始终不能直接访问的原因 切记切记切记，这才是关键 先将它原始就有的ROOT删掉 把 自己的项目包“oa.war” 改成 “ROOT.war” 即可，因为下面的...
在Tomcat上部署Vue.js项目
小时的枫的博客
07-17 3万+
接着上次的图书管理系统 修改完问题后把SpringBoot成功部署到了服务器上 测试了下api接口，能正常访问 那么下面就是在服务器上部署前端的vue.js了 这里的话我们要明确一点 vue.js是一个前端的框架，所以部署的时候并不需要node.js之类的服务器 像本地的 1 npm run Dev 只是用来调试用
vue项目打包到tomcat下运行
qq_24061745的博客
11-06 1万+
1、项目完成后修改config下index.js相应的设置。 2、cmd  该项目文件夹下运行  cnpm run build。 3、打包完成后相应的文件在项目下面的dist文件夹下。 4、目前配置的地址为：/，需要将访问页面拷到文件夹里面。 、 5、将my-project文件夹放到tomcat下，启动tomcat就可以访问项目了。
Vue项目webpack打包部署到服务器
热门推荐
Dear_Mr的博客
06-05 7万+
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题，而且在经过我的询问，好多人在打包部署的时候都遇到了一些问题，下面就来说下，如何将Vue项目放置在服务器上，这里以Tomcat为例。必须要配置的就是/config/index.js在vue-cli webpack的模板下的/config/index.js，我们可以看到assetsPublicPath这个键，并且这个东西还出现
vue项目部署运行到tomcat上
fengsx0521的博客
07-30 3643
使用webstrorm开发vue前端工程项目时，使用命令npm run dev开启服务，可以通过访问电脑IP:电脑端口实时预览页面，当时我在想使用手机端来调试页面时，发现即使手机与电脑处于同一局域网环境下，仍然无法访问。 这就很奇怪了 ，平时只要我的电脑和手机处于同一局域网环境下，使用手机访问电脑IP:电脑端口/项目名，就可以正常访问，现在却不行，结果去网上搜索，普遍的一个解决办法是在webst...
如何将vue项目部署到tomcat
cherry_zhang18的博客
08-06 2994
step1:打包以后dist文件放到tomcat的webapps文件下 step2:进入tomcat的bin目录下 step3:输入命令C:\tomcat\bin>stutdown 之后 C:\tomcatbin>startup step4:http://127.0.0.1:8080/dist/#/访问以下...
Vue项目部署在Tomcat下 （作者选择tomcat 8.5.55)
阿叁博客
06-08 1088
1. 修改项目 config 文件夹下的 index.js 文件，找打build ->assetsPublicPath 修改值为 “./” 2. 在vue项目根目录下 执行 npm run build 3. 第二步会生成dist文件夹，在此文件夹下会有index.html和static文件夹 4. 在tomcat中 webapps 文件夹下创建你项目名称的文件夹，这里作者创建的为app 5. 将第3步中的文件复制到第4步中文件夹下 6. 启...
tomcat部署vue项目
atongmu09的博客
01-10 3341
1.找到config>index.js 修改assetsPublicPath。 2.tomcat目录中的conf>server.xml 添加新端口 <Service name="Catalina2"> <Connector port="8088" protocol="HTTP/1.1" connectionTimeout...
在tomcat启动vue项目的详细步骤
05-03
要在Tomcat上部署和运行Vue项目，需要完成以下步骤： 1. 构建Vue项目。使用命令行工具进入Vue项目的根目录，然后运行 `npm install` 命令安装依赖并构建项目。构建完成后，会在项目根目录下生成一个 `dist` 文件夹，里面包含了构建好的静态资源。 2. 将构建好的静态资源复制到Tomcat的webapps目录下。可以直接将 `dist` 文件夹复制到Tomcat的 `webapps` 目录下，或者将 `dist` 文件夹打成war包，然后复制到Tomcat的 `webapps` 目录下。 3. 修改Tomcat的配置文件。在Tomcat的 `conf` 目录下找到 `server.xml` 文件，找到 `<Host>` 标签，在其中添加一个 `<Context>` 标签，配置Vue项目的访问路径和静态资源的路径，例如： ``` <Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true"> <Context docBase="/path/to/dist" path="/vue" /> </Host> ``` 其中，`docBase` 属性指定静态资源的路径，`path` 属性指定Vue项目的访问路径。 4. 启动Tomcat。启动Tomcat后，访问 `http://localhost:8080/vue` 即可访问Vue项目。 注意事项： 1. Vue项目必须先进行构建才能部署到Tomcat上。 2. Tomcat的配置文件必须正确配置，否则无法正确访问Vue项目。 3. 在访问Vue项目时，浏览器可能会出现跨域问题，需要在Vue项目中配置proxy代理或者在Tomcat中配置CORS跨域。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值