转载

发表于 2020年03月17日
浏览 (541)
评论 (0)

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

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

1.2 环境参数

操作系统：window10，64位
vue：v2.6.11
echarts：v4.6.0
vue-cli：v3.0.1
node.js：v12.14.0+
git:v2.25.1
three.js:0.114.0

二、部署方式

2.1本地预览

打包：用vscode打开datav-demo(上一节创建的)工程，切换到master分支，然后打开终端，输入npm run build,进行打包编译。

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

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

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

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

2.2Tomcat部署

Tomcat软件测试：下载好Tomcat软件解压之后，双击bin目录下面的startup.bat,启动Tomcat。

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

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

端口默认是8080，如果想修改端口号，需要修改conf文件夹下面的server.xml文件。
部署tomcat中：先把webapps/ROOT目录下的所有文件剪切拷贝出去，然后把dist目录下面的所有文件拷贝放置在tomcat压缩包中的webapps/ROOT下面。

默认路径：因为tomcat的默认目录是ROOT，即当我们在浏览器输入localhost:8080时，tomcat默认到ROOT目录下去找index文件。现在把dist文件夹中的文件拷贝进去之后，需要先关闭tomcat，然后重启。先双击bin目录下的shutdown.bat，然后在双加startup.bat。再次打开浏览器，输入localhost:8080,即可看到我们的柱状图了。
其他路径打包：我们运行npm run build时，打包后的文件必须要放在ROOT目录下才可以运行，有时候tomcat的ROOT目录下已经有文件了，不可能删除，这时候需要分开，即访问时增加一个路径，比如localhost:8080/datav/index.html这样。
配置打包路径：如果需要访问地址如上（localhost:8080/datav/index.html），则需要在工程中主路径下添加一个vue.config.js，并输入以下内容。

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

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

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

正文到此结束

所属分类：编程技术 Java

本文标签： HTML src 测试 tar App dist 编译 Node.js build 部署服务器 js 数据 Webapps Master root https UI 操作系统 HTTP服务器 web git 配置参数下载目录 tomcat 安装软件删除 node XML http 端口 cat
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

热门推荐

openfire数据库安装指南

浏览(13,614) 评论(0)
Caffe 深度学习框架上手教程

浏览(10,361) 评论(0)
ReactiveCocoa入门教程：第一部分

浏览(11,197) 评论(0)
开源HIDS-OSSEC使用实例:监测CC攻击

浏览(11,086) 评论(0)
Decorators in ES7

浏览(15,645) 评论(4)
用Electron（Atom编辑器的兄弟项目）开发桌面应用

浏览(28,668) 评论(0)
Windows下JetBrains CLion中文输出乱码的解决方法

浏览(12,115) 评论(1)
同步-@synchronized, NSLock, pthread, OSSpinLock性能比较

浏览(11,091) 评论(0)
Seaweedfs之Volume读请求重定向

浏览(25,363) 评论(3)
HTML、CSS及JavaScript ：有Promise，不会搞大肚子

浏览(13,228) 评论(0)

相关文章

阿里云首购8折

Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号

HBLOG

HBLOG