vue2.x小白入门数据可视化实战5–打包编译部署

最近在研究数据可视化的内容,在网上搜了一圈,数据可视化项目的教程资源比较少,计划结合自己的探索,写一个基于vue2.x的数据可视化入门实战课程,供大家参考学习。

1.2 环境参数

  1. 操作系统:window10,64位
  2. vue:v2.6.11
  3. echarts:v4.6.0
  4. vue-cli:v3.0.1
  5. node.js:v12.14.0+
  6. git:v2.25.1
  7. three.js:0.114.0

二、部署方式

2.1本地预览

  1. 打包:用vscode打开datav-demo(上一节创建的)工程,切换到master分支,然后打开终端,输入npm run build,进行打包编译
    vue2.x小白入门数据可视化实战5--打包编译部署

    运行结束,无报错的话,可以看到工程目录下面,有一个dist文件夹。

    vue2.x小白入门数据可视化实战5--打包编译部署

    2、安装服务器:直接双击dist目录下的index.html运行,是无法运行的,需要HTTP服务器来访问,在终端中输入npm install -g serve安装静态文件服务器。

    vue2.x小白入门数据可视化实战5--打包编译部署

    3、运行:在终端中输入serve -s dist,结果如下:

    vue2.x小白入门数据可视化实战5--打包编译部署

    然后在浏览器中输入http://localhost:5000,即可看到前端界面(我以上一节的折线图为例)

    vue2.x小白入门数据可视化实战5--打包编译部署

2.2Tomcat部署

  1. Tomcat软件测试下载好Tomcat软件解压之后,双击bin目录下面的startup.bat,启动Tomcat。
    vue2.x小白入门数据可视化实战5--打包编译部署

    当看到如下界面信息时,表示启动成功。

    vue2.x小白入门数据可视化实战5--打包编译部署

    然后在浏览器中输入localhost:8080,可以看到Tomcat默认界面。

    vue2.x小白入门数据可视化实战5--打包编译部署

    端口默认是8080,如果想修改端口号,需要修改conf文件夹下面的server.xml文件。

    vue2.x小白入门数据可视化实战5--打包编译部署
  2. 部署tomcat中:先把webapps/ROOT目录下的所有文件剪切拷贝出去,然后把dist目录下面的所有文件拷贝放置在tomcat压缩包中的webapps/ROOT下面。
    vue2.x小白入门数据可视化实战5--打包编译部署

    默认路径:因为tomcat的默认目录是ROOT,即当我们在浏览器输入localhost:8080时,tomcat默认到ROOT目录下去找index文件。 现在把dist文件夹中的文件拷贝进去之后,需要先关闭tomcat,然后重启。先双击bin目录下的shutdown.bat,然后在双加startup.bat。 再次打开浏览器,输入localhost:8080,即可看到我们的柱状图了。

    vue2.x小白入门数据可视化实战5--打包编译部署
  3. 其他路径打包:我们运行npm run build时,打包后的文件必须要放在ROOT目录下才可以运行,有时候tomcat的ROOT目录下已经有文件了,不可能删除,这时候需要分开,即访问时增加一个路径,比如localhost:8080/datav/index.html这样。
  4. 配置打包路径:如果需要访问地址如上(localhost:8080/datav/index.html),则需要在工程中主路径下添加一个vue.config.js,并输入以下内容。
    vue2.x小白入门数据可视化实战5--打包编译部署

    此时也会生成一个dist文件夹,把这个dist文件夹拷贝到tomcat的webapps目录下,然后改为datav。

    vue2.x小白入门数据可视化实战5--打包编译部署

    在重启tomcat,在浏览器中输入localhost:8080/datav/index.html就可以看到柱状图了。

    vue2.x小白入门数据可视化实战5--打包编译部署

原文 

https://juejin.im/post/5e703c61f265da573c0c94d3

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » vue2.x小白入门数据可视化实战5–打包编译部署

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址