13518219792
这篇文章主要介绍“vue-cli3和vue-cli2的区别有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue-cli3和vue-cli2的区别有哪些”文章能帮助大家解决问题。
成都创新互联长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为连平企业提供专业的成都做网站、网站设计、外贸营销网站建设，连平网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
区别：1、“vue-cli3”是基于webpack4打造的，而“vue-cli2”是基于webpack3打造的；2、“vue-cli3”移除了static文件夹，新增public文件夹，并且将“index.html”移动到了public中。
本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。
vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构，3 的设计更加抽象和简洁（此处后续可以详细介绍）
vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。
vue-cli 3 的设计原则是0配置，移除的配置文件根目录下的 build 和config等目录
移除了static文件夹，新增public文件夹，并且index.html 移动到了public中
vue_project
-- node_modules # 安装的库依赖
-- public # 相当于vue-cli2中的static，打包后原封不动的放在dist中
-- src # 源代码
-- .browserslistrc # 配置浏览器相关的东西
-- .gitignore # 配置git相关的东西，可以配置忽略一些文件
-- .babel.config.js # 配置 babel
-- package.json
-- package-lock.json # 显示的真实的安装版本(package.json中可能有~或者 ^ 后面加版本号，因此可能会安装不同版本的依赖)
-- readme.md # markdown 文档
# 启动项目
npm run serve
# 打包项目
npm run build
注：这些命令都是在 package.json 的 script 中配置的
{
"name": "vue3test",
"version": "0.1.0",
"private": true,
"scripts": {
# 运行项目
"serve": "vue-cli-service serve",
# 打包项目
"build": "vue-cli-service build"
},
# 运行依赖
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
# 开发依赖
"devDependencies": {
"@vue/cli-plugin-babel": "^4.4.0",
"@vue/cli-service": "^4.4.0",
"vue-template-compiler": "^2.6.11"
}
}关于“vue-cli3和vue-cli2的区别有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
