简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别

码文不易啊，转载请带上本文连接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14363272.html

关于VUE的项目，有个问题一直不是特别清楚 ，不一样公司的项目，其项目结构，对应配置文件位置，及启动打包对应的命令等，都有所不一样，近期经过查找相关资料及公开视频教学，整理一篇笔记，但愿能帮跟我同样困惑的同窗，拨开迷雾！

公司在建立项目的时候，都会倾向使用脚手架vue-cli，vue-cli 提供一个官方命令行工具，可以快速的搭建vue项目结构，同时可帮助配置各类文件目录及项目打包。其实就是一个基于webpack构建，可让用户快速初始化一个项目的工具。

基本原理: vue-cli并不是从无到有地凭空生成一个项目，而是经过(download-git-repo工具)下载/拉取已有的工程到本地，完成生成项目的工做。

而致使不一样项目的配置及目录不一样的缘由之一，就是脚手架的版本不一样致使，接下来具体讲述一下vue-cli 2.x和vue-cli 3⁺，项目构建、运行、编译命令区别：

首先： cmd > vue -V,该命令查看的是vue-cli的版本，并不是vue的版本

	vue-cli 2.x	vue-cli 3+
安装	npm install -g vue-cli	npm install -g @vue/cli
建立项目	vue init webpack projectName	vue create projectName
编译运行	npm run dev	npm run serve
可视化项目管理工具	--	vue ui 默认地址：localhost:8000

建立项目

• 搭建vue-cli 3项目前，如若已安装旧版本vue-cli，需先卸载旧版本vue-cli，再从新安装vue-cli 3+，2个命令能够升级到3以上

• node版本要求: Node.js8.9 或更高版本 ,输入 node -v 查看node版本

• 当vue-cli 版本达到 vue-cli4.5.0 以上，就能够建立vue3.0的项目，支持体验vue3.0的新特性，（3.x Preview）

目录结构

1. vue-cli 3+的项目摒弃了 config 、 build 、 static 目录，新增了 public 目录，将根目录下的 index.html 放置在 public 目录下。

2. 新增 vue.config.js (需手动建立)配置文件，能够在该文件中进行webpack的相关配置，例如 loader、开发环境等。

3. 新增.browserslistrc 文件，指定项目的目标浏览器的范围，用来肯定须要转译的 JavaScript 特性和须要添加的 CSS 浏览器前缀，能够理解为浏览器兼容。

4. 新增 babel.config.js 替代原先的.babelrc，具有和原先.babelrc同样的做用。

5. src文件夹中多了 views 文件夹

编译运行

配置项

修改配置：vue-cli 3+的设计原则是“零配置”，移除（隐藏）配置文件 build 和 config 等目录，隐藏到哪里了?咱们如何修改配置？

方法一：在隐藏的文件夹直接修改

node_modules\@vue\cli-service\webpack.config.js 对应的 node_modules\@vue\cli-service\lib\Service.js

方法二： （推荐）

1. 根目录下建立vue.config.js，包括：经常使用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等，详细配置能够看 官方文档

2. config文件夹已经被移除，可是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不一样

方法三： 命令行vue ui 开启一个本地服务，打开可视化项目管理工具

其余小知识点补充

• 安装了vue-cli 3.x 后如何使用 vue-cli 2.x 建立项目：须要安装一个桥接工具@vue/cli-init, 便可使用vue-cli 2.x对应指令建立项目

npm install -g @vue/cli-init

• vue-cli3.0+在项目建立最后会有一个保存当前配置的功能preset（预设）,实际上是在create新项目时，生成的插件配置项预设，也就是在项目中须要用到的插件安装成功以后，会生成一个关于preset的文件，当再次create新项目时，就不须要再去选择一样的插件，直接用预设安装便可。设置保存预设时系统会自动生成一个.vuerc的文件，通常在c盘，可查看以前作的预设配置