转载

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
正文到此结束
所属分类： Java 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 springcloud-demo Redis教程 Spring教程 Git教程 openfire参考指南 Jenkins进阶系列 Java设计模式 HBase教程 java-demo Maven教程 hibernate教程 memcached教程 Docker 教程 Quartz指南 Hive教程 Ant教程 java实例教程 SpringCloud ANTLR教程 Hazelcast教程 Elastic-Job-Lite 深入浅出MyBatis XStream教程 SVN教程 ibaties教程 rabittmq教程 solr教程 Hadoop教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 Claude Opus 4.7：一个开始“干活”的大模型
  2. 2 在 AI 快速发展的今天，“人还重要吗？
  3. 3 openclaw 连接 MySQL 实现数据分析
  4. 4 他用20年拿下WSBK冠军，而你还没开始做第一个产品
  5. 5 48小时打造一个类似 Product Hunt 的网站
  6. 6 BTCPay Server 安装部署完整指南（2026最新）
  7. 7 openclaw升级和参数调整
  8. 8 让 OpenClaw“自动发现并安装插件”
  9. 9 openclaw对接企业微信
  10. 10 90%的独立开发者死在这10件小事上
网站信息
  • 文章总数：80,223 篇
  • 文件总数：211,070 个
  • 标签总数：2,521 个
  • 分类总数：87 个
  • 留言数量：2,598 条
  • 在线人数：25 人
  • 运行天数：4,922天
  • 最后更新：2026年04月19日21点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG