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

ゝ一世哀愁。 2021-09-18 00:12 534阅读 0赞

## 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 ###

##    3、创建项目 ##

Vue CLI 3:

vue create hello-world

Vue CLI 2:

vue init webpack my-project

*    
    一直按回车为默认选项，手动设置请参考[官方文档][Link 1]
    
    ## 4、运行项目 ##
    
    Vue CLI 3:
    
        cd hello-world
        yarn serve
    
    Vue CLI 2:
    
        cd my-project/
        npm run dev

**5、验证**

在浏览器输入[localhost:8080][localhost_8080]，看见下图图所示的效果即为成功  
![e44344dcly1fxdflm4228j21h50n4myf.jpg][]  
![e44344dcly1fxdflmf39hj20yq0mnmyg.jpg][]  
![e44344dcly1fxdflmri0zj20yq0rljti.jpg][]  
![e44344dcly1fxdflo421uj20yq0acwez.jpg][]

## 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][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][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][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_hello-world]、[vue.dongkelun.com/dist][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文件的差异，多尝试一下就了解了

参考：[https://dongkelun.com/2018/11/19/vueCliCreateProject/][https_dongkelun.com_2018_11_19_vueCliCreateProject]

[nodejs]: https://nodejs.org/en/
[yarn]: https://www.yarnpkg.com/zh-Hans/
[Link 1]: https://cli.vuejs.org/zh/
[localhost_8080]: http://localhost:8080/
[e44344dcly1fxdflm4228j21h50n4myf.jpg]: /images/20210812/388eaecba36240e69f7767347e494b16.png
[e44344dcly1fxdflmf39hj20yq0mnmyg.jpg]: /images/20210812/0ae2f925ff634e218b04e8a237bdfeb1.png
[e44344dcly1fxdflmri0zj20yq0rljti.jpg]: /images/20210812/8629dd7dc8514b35a10fb5cb1d23ba95.png
[e44344dcly1fxdflo421uj20yq0acwez.jpg]: /images/20210812/3b24ef7b92f94307a829eea673cc6191.png
[serve]: https://github.com/zeit/serve
[http_localhost_5000]: http://localhost:5000/
[https_cli.vuejs.org_zh_guide_deployment.html_platform-guides]: https://cli.vuejs.org/zh/guide/deployment.html#platform-guides
[https_blog.csdn.net_Dear_Mr_article_details_72871919]: https://blog.csdn.net/Dear_Mr/article/details/72871919
[vue.dongkelun.com_hello-world]: http://vue.dongkelun.com/hello-world
[vue.dongkelun.com_dist]: http://vue.dongkelun.com/dist
[https_dongkelun.com_2018_11_19_vueCliCreateProject]: https://dongkelun.com/2018/11/19/vueCliCreateProject/