浅谈vue-cli 3 和 vue-cli 2的区别！！！

Z时代
2024-01-10
分类：综合

vue

Vue-cli3.0于8.11日正式发布，看了下评论，不是特别的乐观，说说我个人的意见，我是Vue的忠实粉，so....

大概三个月前超哥就已经得知3.0的消息，试着用了下，相比之下现在的3.0和测试时的区别：

modern mode。启用该模式会自动构建两个版本的 js 包，针对支持现代浏览器的原生 ES2015+ 包，和针对其他旧浏览器的包，生成的 HTML 会通过 <script type="module"> 和 <script nomodule> 进行自动降级，不需要任何特殊部署配置。原生 ES2015 包几乎不需要任何 polyfill 和编译，代码尺寸更小，现代浏览器 parse 和运行也更快。

然后直接正题，我把版本降回到的2.9，接下来直接使用3.0的安装命令:

3.0的安装：vue create 3.0project；

2.0的安装：vue init webpack(据我所知有五个，这个是我常用的) 2.0project(项目名)；

如果版本为>3.0npm 会提示，如果你想运行请升级到3.0，还等啥升级呗。

一路回车是完事了嘛？，猛的一看，哦NO，本人并不喜欢eslint，是特别反感的那种，相信很多朋友都不喜欢。

来回头看，他是问你是否使用默认的preset 还是手动配置功能，而我们却回车回车再回车，让我们从新来过，手动选择，只因eslint，强迫症又来了。

上图是手动的情形，如果选择手动则出现这个这个页面，可以使用空格键选中或取消，a选中所有，i反选，来让我们看看好像和2.0+没啥太大的的区别，简单的过目一下猛的一看多了VUEX？之前有vuex嘛？反正我是自己配的，其他的什么单元测试、路由...2.0+也都有。

接下来看看 2.0+的：

上图是2.0+的

确实VUEX是新加的。来启动一下3.0：

3.0启动npm run serve

2.0启动npm run dev

至于为什么会变，来看一下package.json

这就秒懂了吧！！！

接下来简单的看一下项目目录对比：

build没了、config没了、哦对了还有最重要的一点，3.0的安装项目时自动下载node-model。

如果vue.config.js没了怎么破。

慌鸡毛，超哥带你走向人生巅峰！！！

在根目录下创建一个vue.config.js不就行了，哈哈哈哈哈，我也觉着逗，具体配置看文档，写的很详细！！！

还是给你们写两个常用的吧，一群吃瓜群众。。。

module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
// outputDir: 在npm run build时生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
devServer: {
port: 8888, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}, // 配置多个代理
}
}
好了，终于完事了。