软件开发架构师

15 Vue项目部署

前端 79 2019-03-22 23:09

前言:

  VUE 是一个javascript的前端框架,注定了它是运行在浏览器里的,对服务器本地没有任何要求,只要一个静态文件服务器能通过http访问到其资源文件就足矣!无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器,也用不了多少行代码。

  npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外)运行npm run dev 来启动哪是开发机上做的调试的事情。

  正确部署的做法很简单,通过npm run build 把生成的文件夹里的内容上传到http服务器上就可以通过 http来访问了,开发机上正常,上传以后 程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。

  一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的,也不存在资源文件引用错误的情况,但如果你不是根目录,就会有问题。

 

部署起来很简单:

1: 进入到项目的文件夹: 运行 npm  run build

2:   会生成 manage文件夹, 

 

 看一下static文件夹包含的东西:主要就是CSS, fonts字体和JS, 无论程序怎么复杂,打包完后就是这些东西。 当然可能还会有一些图片等的静态文件,本项目没有图片。

 

 3: 把生成的manage放到Tomcat的webapps文件夹下

4: 运行 “D:\Tomcat8\apache-tomcat-8.5.20\bin\startup.bat“, 启动Tomcatserver

 

5: 浏览器中输入:   http://localhost:8080/manage/index.html#/ 

 

文章评论