tomcat6.0如何部署 vue-cli创建的项目 以及我遇到的问题点

之前纠结了好久 tomcat6.0 如何把 vue-cli 发布。 百度好多~也收获了好多

我遇到的问题点:
1. 步骤1:先不要对vue-cli项目进行打包(npm run build), 先进入 vue-cli项目的config/index.js
Ⅰ: 在dev :{ assetsPublicPath: ‘/’ } ==》 修改成 dev :{ assetsPublicPath: ‘./’ }
Ⅱ: 在build:{ assetsPublicPath: ‘/’ } ==》 修改成 build :{ assetsPublicPath: ‘./’ }
图一图二所示:

  										图一

在这里插入图片描述

											> 图二

在这里插入图片描述
{这是主要决解了项目部署到tomcat6.0上后 ,出现404 的界面}

步骤2:
这个时候我去npm run build 打包生成dist 文件夹 在vue-cli项目中会生成一个dist文件夹
如图三所示:

									> 图三

在这里插入图片描述
dist文件夹包含了 3个文件(static文件夹一个 和 favicon.ico 文件一个 和 index.html 文件一个)
如图四所示:

											> 图四

在这里插入图片描述
步骤3:
打开tomcat6.0安装的路径文件夹(就是你把tomcat6.0装到哪个盘了 C盘?D盘?F盘?…):
①:进入 tomcat6.0下的webapps文件夹下 (如图五所示:)

										> 图五

在这里插入图片描述

注意:不要管我的红色线的文件夹。这个是我手动生成的//不要管

步骤4:在tomcat6.0/webapps下~ 手动生成一个自定义文件夹 (名字自己取) 在这里我叫他 ‘winter ’文件夹 然后:把步骤2 中的dist 文件夹的3个文件 拷贝到 winter文件夹下
效果图4-1:
在这里插入图片描述

步骤5:打开 tomcat6.0/conf/server.xml 文件 (如图6所示:)

										>  图六

_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pjeTYyMzE3ODAz,size_16,color_FFFFFF,t_70)这里就是我配置的代码 可以借鉴一下
注意:先不要管 红横线 的地方为什么注释掉 ,注意我 红框的地方

这里的 docBase=“F:\tomcat6.0\tomcat6.0\webapps\winter” 路径 改成你自己的路径
(如图六所示:)

然后看图7

										> 	图七

在这里插入图片描述
看图七: 里面除了红横线的内容不一样,其他可以照抄
---->然后保存
步骤4:打开tomcat6.0/bin 文件夹 打开 startup.bat 文件
(如果出现闪退,可能是你当初安装tomcat6.0时候,环境变量里的 配置JDK 或者JRE 路径不对,自己百度。挺简单的)
打开成功 就如图八所示:

											>  图八

在这里插入图片描述只要出现了 图八所示的红框 出现这个说明tomcat6.0启动成功了

我的理解是~本来tomcat/webapps下如果没有文件 说明部署完之后打开localhost:80
会出现tomcat官网。如果webapps下有 vue-cli项目打包的文件。就会出现 打包项目的画面

按照我的情况来:然后我在浏览器输入 localhost:9009
startup.bat 启动框就出现了错误 ‘Error , processing connection …’ 如图9 所示画面:

											图九

在这里插入图片描述
在浏览器输入 localhost:9080 浏览器报错了
如图10所示
(当时不懂,就输入了localhost:9080和localhost:9009 都看看会出现什么效果)

										> 	图10

在这里插入图片描述
要是决解图9 就是进入tomcat6.0/conf/server.xml 把

 <Connector port="9009" protocol="AJP/1.3" redirectPort="8443" /> 

注释掉
就可以了~

要是解决图10 就进vue-cli项目 src/router/index.js 拉到最下面 修改在这里插入图片描述
把红框里面的代码 注释掉
项目重新打包~生成dist /然后把里面3个文件 都拉到tomcat6.0/webapps/‘自定义文件夹下’ 再重启startup.bat
重新启动 浏览器输入localhost:9080 就OK啦

以上是我部署vue-cli遇到的问题点;
如果有其他的问题可以加微信zcy62317803 可以交流交流~ 肯能你遇到问题我也不会~但是我会的就会告诉你
谢谢~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值