通过Vue CLI 快速创建Vue项目并部署到tomcat

前言

最近一直在写前端,用的是JSP,但是很多人都说JSP已经过时了。既然做了几个月的前端,那就把前端学的好一点,学点新技术,跟上潮流。感觉Vue挺火的,所以这几天学了一下Vue,开始看的官方文档,然后直接用GitHub上比较火的项目进行学习,本地跑起来,看看效果、源码和代码结构,学习相关的插件等,并部署了其中一个项目到我的二级域名下:vue.dongkelun.com(感觉这个项目里的东西挺全的)。

因为一直用的github上别人搭建好的项目进行学习,担心和用Vue CLI创建的项目的代码结构有区别,所以就看了一下Vue CLI的官方文档,进行简单搭建,看看到底有什么区别,做到心中有数。

1、前提

首先你要安装好nodejsyarn,直接在官网下载安装包,一键安装即可,不需要什么环境配置,我安装的是最新版本(node-v10.13.0、yarn-1.12.3)

2、安装

  • 同时写Vue CLI 3和Vue CLI 2 的原因是官方默认的是3,而自己学习的GitHub上的项目为2~2.1 新版本 Vue CLI 3
  • 写这篇文章的时候官网默认的为Vue CLI 3npm install -g @vue/cli # OR yarn global add @vue/cli

2.2 旧版本 Vue CLI 2

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

3、创建项目

Vue CLI 3:

vue create hello-world

Vue CLI 2:

vue init webpack my-project
  • 一直按回车为默认选项,手动设置请参考官方文档4、运行项目 Vue CLI 3:cd hello-world yarn serve

Vue CLI 2:

cd my-project/
npm run dev

5、验证

在浏览器输入localhost:8080,看见下图图所示的效果即为成功

6、构建

yarn build
# OR
npm run build

会生成一个dist文件夹

7、部署

7.1 本地预览

dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 baseUrl 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve

安装serve:

npm install -g serve

启动:

serve -s dist
INFO: Accepting connections at http://localhost:5000

预览:http://localhost:5000

7.2 部署到tomcat

默认的配置直接部署到tomcat,是有错误的(在浏览器检查里发现是找不到对应的静态文件,原因是路径不对),需要修改一下配置,版本2和版本3的配置也不一样

Vue CLI 3: 在hello-world新建vue.config.js,并添加如下内容

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/hello-world/'
    : '/'
}

这里参考官方文档:https://cli.vuejs.org/zh/guide/deployment.html#platform-guides Vue CLI 2: 找到my-project/config/index.js文件中build对应的assetsPublicPath键值,将其修改为

assetsPublicPath: './',

这里参考:https://blog.csdn.net/Dear_Mr/article/details/72871919

重新build,将生成的dist文件夹复制到tomcat目录下的webapps文件夹下,可以将dist文件夹改名为hello-world,那么访问路径就为 ip/hello-world,也可以不改名那么访问路径就为ip/dist,效果查看vue.dongkelun.com/hello-worldvue.dongkelun.com/dist

8、其他问题

8.1 npm run dev启动后,用Ctrl+c,关闭不了对应的进程

原因是在Git Bash Here里执行的命令,一种方法是在windows 的shell里执行命令(输入cmd进入),另一种办法是如果不想放弃git的命令行的话,每次启动完用tskill node杀死进程。

8.2 依然想用 npm run dev 启动上面的hello world程序

办法是修改package.json文件,找到scripts下的”serve”: “vue-cli-service serve”,复制这一行到下一行将key(serve)改为dev即可

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android 开发者

Android Oreo 可下载字体

1803
来自专栏ArrayZoneYour的专栏

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法(在本教程中我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Faceboo...

2524
来自专栏SHERlocked93的前端小站

JS 回调模式

如果有个模块 findeNodes() ,任务是找到期望的 DOM 元素并使用 hide() 处理:

1121
来自专栏技术博文

sublime Text3

sublime Text3实用功能和常用快捷键 PS:ST3在Mac OX与Windows不同平台下的快捷键差别很大。下面是针对windows平台的解说。 1....

30211
来自专栏企鹅号快讯

前端性能优化——桌面浏览器前端优化策略

作者:ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念,本书...

2436
来自专栏liulun

在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题

首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” image.png 然后点击配置HTML语言的基础设置 image.png 然后在...

2218
来自专栏逸鹏说道

05.GitHub实战系列~5.发布版本之分支操作+Tag讲解 2015-12-14

如果是自己开发的话,git你最关心的可能就是今天所讲的东西了,屁话不多说,步入正轨~ Tag推送: 先看看需求: ? 1. 引入,git查看tag的命令是:gi...

3636
来自专栏web编程技术分享

【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面

3968
来自专栏从零开始学自动化测试

Appium+python自动化19-iOS模拟器(iOS Simulator)安装自家APP

前言 做过iOS上app测试的小伙伴应该都知道,普通用户安装app都是从appstore下载安装,安装测试版本的app,一般就是开发给的二维码扫码安装, 或者开...

3723
来自专栏编程微刊

前端程序员表白神器

2882

扫码关注云+社区

领取腾讯云代金券