开发者社区> 董可伦> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 版权声明:本文由董可伦首发于https://dongkelun.com,非商业转载请注明作者及原创出处。商业转载请联系作者本人。 https://blog.csdn.net/dkl12/article/details/84281778 我的原创地址:https://dongkelun.com/2018/11/19/vueCliCreateProject/ 前言 最近一直在写前端,用的是JSP,但是很多人都说JSP已经过时了。
+关注继续查看
版权声明:本文由董可伦首发于https://dongkelun.com,非商业转载请注明作者及原创出处。商业转载请联系作者本人。 https://blog.csdn.net/dkl12/article/details/84281778

我的原创地址:https://dongkelun.com/2018/11/19/vueCliCreateProject/

前言

最近一直在写前端,用的是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 3
npm 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即可

  • 自己可以对比一下,两个版本的package.json文件的差异,多尝试一下就了解了

相关阅读

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
linux下JDK、Tomcat的安装及配置
先查看[Linux]系统是多少位(32位/64位) getconf LONG_BIT JDK官网:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.
1101 0
腾讯云服务器 - 配置JDK环境以及Tomcat+nginx服务器
安装完ngxin以及fastdfs后,那么jdk和tomcat是肯定要装的,本篇很简单,实在没啥好说的,都是基础,略微带一下,如果是大牛路过可以看看吐槽一下 云服务器上初识环境如果没有选择附带其他软件是没有jdk的,如果有,你可以可以用 java –version   这个命令来看看是否安装,如果安...
1017 0
Intellij IDEA配置tomcat热部署
idea2017+tomcat8为本文的实验环境 1.打开tomcat的edit configuration,一定要选择war exploded    在idea tomcat 中server的配置里,有个on frame deactivation,选择update classes and resources。
1054 0
在IDEA上配置外部tomcat
有时候你导入的项目不是用springboot去写的,那这时就要你自己配置tomcat了。 在IDEA中使用tomcat很简单 文件→设置→构建.执行部署→Deployment→服务器选择tomcat Paste_Image.
1032 0
IntelliJ IDEA 2017 配置Tomcat 运行Web项目
以前都用MyEclipse写程序的 突然用了IDEA各种不习惯的说 借鉴了很多网上好的配置办法,感谢各位大神~ 前期准备 IDEA、JDK、Tomcat请先在自己电脑上装好 好么~ 博客图片为主 请多看红框框 开始 1.
1758 0
+关注
董可伦
大数据、Spark、前端、机器学习 个人博客:https://dongkelun.com/ 专业:信息与计算科学
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
基于VUE的单页面性能优化实践
立即下载
SQL Server 2017
立即下载