Linux服务器部署vue项目[通俗易懂]

Linux服务器部署vue项目[通俗易懂]最近刚到新公司,正好之前没接触过这方面的东西。最初仅仅是猜想。最后也没想到Tomcat真的可以部署前端页面好,我先来。新建一个vue项目。//详细的怎么创建。我这里就不说了。vueinitwebpackvuetest得到的项目目录执行,npmrunbuild//进行打包操作当最后看到这样代表打包成功此时你可连接服务器。我这里用…

大家好,又见面了,我是你们的朋友全栈君。

最近刚到新公司,正好之前没接触过这方面的东西。最初仅仅是猜想。最后也没想到Tomcat真的可以部署前端页面

 

好,我先来。新建一个vue项目。  // 详细的怎么创建。我这里就不说了。

vue init webpack vuetest

Linux服务器部署vue项目[通俗易懂]

得到的项目目录

执行,

npm run build   // 进行打包操作

Linux服务器部署vue项目[通俗易懂]

当最后看到这样代表打包成功

此时你可连接服务器。我这里用的是 xshell 工具,注明:工具无所谓。链接上就可以(给小白看的)

Linux服务器部署vue项目[通俗易懂]出现此画面,连接成功

下载Tomcat

各位可以选择两种方式:

    1.在Windows上下好传过去。// 自己百度传的方式。我这里不教

    2.wget 后面跟上下载路径即可

我选择第二种

wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-7/v7.0.90/bin/apache-tomcat-7.0.90.tar.gz

执行以上命令

// 提醒一点。Tomcat需要Java支持。我随后会发布安装Java的教程。

此时下载是一个tar.gz的压缩包

tar -zxcf apache      // 后面按一个tab他会自动补全

Linux服务器部署vue项目[通俗易懂]

随后我们cd 进到目录

Linux服务器部署vue项目[通俗易懂]

此时我们到达Tomcat的bin目录中。。。接下来执行ls查看一下。当前目录下有哪些文件

Linux服务器部署vue项目[通俗易懂]我们经常需要用到的两个文件。我已经在图中全出

名字顾名思义  : startup.sh  // 开启的        shutdown.sh     // 关闭的

执行sh脚本    

bash startup.sh

Linux服务器部署vue项目[通俗易懂]看到的是这样的字样。那么代表启动成功

好接下来我们回到vue

打包后。会生成一个dist目录  // 里面两个东西,一个static 文件夹    还有一个index页面   这个是vue帮助我们生成的

Linux服务器部署vue项目[通俗易懂]

文件夹xshell不支持上传。所以我这里把他打成一个压缩包

Linux服务器部署vue项目[通俗易懂]

回到Linux

我们进入Tomcat根目录的webapps文件夹

Linux服务器部署vue项目[通俗易懂]

把刚才打压缩包的dist目录移上去

Linux服务器部署vue项目[通俗易懂]

可以看到。我的这个文件已经上来了

然后解压他:  // 怎么解压自行百度。。  安装unzip什么的。。自己百度

unzip dist.zip

Linux服务器部署vue项目[通俗易懂]

现在。你就可以在的浏览器上输入你的ip。

http://xxx.xxx.xxx.xx:8080/dist/

这个时候你的项目就可以跑通了

不过此时你会发现一个问题。。访问以后是白屏

解决办法:

打开vue项目根目录的config目录

Linux服务器部署vue项目[通俗易懂]

Linux服务器部署vue项目[通俗易懂]Linux服务器部署vue项目[通俗易懂]

把这两处改为   ./

改完保存。打包,把webapps目录下的dist删掉。把这个打包过的替换上。就可以访问了。

此章完结。。个人记录。帮助迷途中的小白。。本人技术有限。勿喷谢谢

===========================

以上 项目创建方式是用vue cli2构建的项目   下方更新vue cli3修复白屏问题

============================

Linux服务器部署vue项目[通俗易懂]

打开这个文件。

Linux服务器部署vue项目[通俗易懂]

将这里改成 

publicPath: ”,

再次打包就好

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150372.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 启用shift后门的方法_服务器可以拿来干什么

    启用shift后门的方法_服务器可以拿来干什么提权工具如下:cmd.exeChurrasco.exenc.exe提权前提:Wscript组件成功开启如果Wscript组件被关闭,则使用以下方法开启:源代码:<objectrunat=serverid=oScriptlhnscope=pageclassid="clsid:72C24DD5-D70A-438B-8A42-98424B88AFB8"></…

  • clion永久激活码2021_在线激活

    (clion永久激活码2021)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • SQLyog客户端无法连接mysql「建议收藏」

    SQLyog客户端无法连接mysql「建议收藏」忘记截图了,只能描述下报错信息:Host ‘服务器地址’ is not allowed to connect to this MySQL server解决方法:添加用户权限1.登录服务端mysql2.在mysql输入命令GRANT ALL PRIVILEGES ON *.* TO ‘root’@’IP地址’ IDENTIFIED BY ‘你设置的密码’ WITH GRANT O…

  • 机房搬迁是什么意思_计算机机房管理规定

    机房搬迁是什么意思_计算机机房管理规定原标题:盘点机房搬迁中最容易出现的五个问题企业要更换办公地址的时候,最头疼的问题就是搬迁机房,机房的搬迁可不是搬家那么简单,是否能顺利搬迁,将成为保障企业业务连续性的关键要素。在企业机房的搬迁中,最容易出现哪些问题?盘点机房搬迁中最容易出现的五个问题(1)领导不明确在规划阶段最常见的错误是未能建立明确的领导。这意味着在迁移过程中的各个阶段中要确定谁负责明确的沟通,带领团队。在一个单一的部门,默认…

    2022年10月30日
  • .pfx 证书和 .cer 证书

    .pfx 证书和 .cer 证书证书系列:1:.pfx证书和.cer证书2:导入pfx证书通常情况下,作为文件形式存在的证书一般有三种格式:第一种:带有私钥的证书,由PublicKeyCryptographyStandards#12,PKCS#12标准定义,包含了公钥和私钥的二进制格式的证书形式,以.pfx作为证书文件后缀名。 第二种:DEREncodedBinary(.cer)二进制编码的证书,证书中没有私钥,DER编码二进制格式的证书文件,以.cer作为证书文件后缀名。 第三种:Bas.

  • python数字转字符串函数_python中将数字转换成字符串

    python数字转字符串函数_python中将数字转换成字符串参考文献:tt=322tem=’%d’%tt可用,已经试用转载于:https://www.cnblogs.com/Wanggcong/p/7620225.html

    2022年10月12日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号