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

前言

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

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

• 本文的环境：win10
• Vue CLI官方文档：https://cli.vuejs.org/zh/

1、前提

首先你要安装好nodejs和yarn,直接在官网下载安装包，一键安装即可，不需要什么环境配置，我安装的是最新版本（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-world、vue.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文件的差异，多尝试一下就了解了

相关阅读

• Centos7 Tomcat9 安装笔记