Vue-cli脚手架2.0和3.0创建项目的区别？

一、生成项目命令

1、安装3.x版本的Vue脚手架：

npm install -g @vue/cli

创建Vue项目命令：

vue create 项目名称

或基于ui界面创建Vue项目，命令：vue ui

2、安装了vue-cli 3.x 后如何使用 vue-cli 2.x 创建项目

需要安装一个桥接工具才能使用 vue-cli 2.x创建项目

npm install -g @vue/cli-init

创建Vue项目：

vue init webpack 项目名称

二、目录的区别

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

新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。

新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。

新增 babel.config.js 替代原先的.babelrc，具备和原先.babelrc一样的作用。

src文件夹中多了 views 文件夹，相比2.0，在 index.js 变为了 router.js

2.0版本相比3.0版本 有build和config文件夹等，src文件夹中有router文件夹，里面有index.js

 

2、用vue-cli3.0版本创建的项目与2.0版本相比较，我们会发现，文件目录少了很多 eg：build、config，那么如何像vue-cli 2.* 之前关于端口号的配置、打包之后的路径的配置、图片的配置等，到哪里配置呢？？vue-cli 3.0 可以在项目的根目录下新建一个 vue.config.js 文件，之前繁琐的配置都可以在这里直接配置。

官方是这样说的。vue.config.js 是一个可选的配置文件，如果项目的（和package.json 平级）根目录中存在这样一个文件，那么他会被 @vue/cli-service 自动加载，（并覆盖其内部的配置）

更多的相关配置，可参考官网  https://cli.vuejs.org/zh/config/#vue-config-js

 

3、相关配置配好了，但是在打包时，如何配置（测试、预发、生产）环境呢？

这是我们只需要在根目录下创建 后缀名为.env（.env.prod  / .env.pre  /  .env.test）的文件，将你需要的环境配进去就可以了

 

4、最后指出配置好环境以后，我们需要在package.json里面配置相应的指令；

“buildTest” ：“vue-cli-service build --mode test”,

"buildPre" ： "vue-cli-service build --mode pre"

"build" : "vue-cli-service build --mode prod"

// 打包，会把process.env.NODE_ENV设置为步骤4中‘.env.alpha’文件设置的值。

// 注意，这里 “--mode 名字“ 要和步骤2中文件名“.env.名字”名字保持一致

如果你还想在同一项目打不同的生产包，也只需在.env文件里面加上相应的配置，但是与vue-cli 2.0 比较，你需要建多个.env文件，来控制的包

 

三、启动项目

3.x启动项目：  

npm run serve

2.x启动项目：

npm run dev  或   npm run start

四、配置项

vue-cli2.0的域名配置，分为开发环境和生产环境，所以配置域名时，需要在config中的dev.env.js和prod.env.js中分别配置

前面说过，到了3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同

当然，没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

在3.0中，vue.config.js中有关于mock的配置

要注意的是：mockjs是用来模拟产生一些虚拟的数据，方便前端在后端接口还没有开发出来时独立开发

即使使用了真实的url，但是mockjs拦截了ajax请求，返回的是设定好的本地数据

如果你想正常从后端获取数据，就要关掉mock的使用，我是直接删掉的，当然你可以选择别的办法

main.js中有一段关于mock.js的描述（注意上线前要去掉你的mock）

另外3.0还多了可视化界面，找到项目，vue ui 命令会直接打开可视化界面，里面可以进行配置、依赖等操作。