這篇文章主要介紹“vue-cli3和vue-cli2的區(qū)別有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vue-cli3和vue-cli2的區(qū)別有哪些”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)長(zhǎng)期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為連平企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)，連平網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

區(qū)別：1、“vue-cli3”是基于webpack4打造的，而“vue-cli2”是基于webpack3打造的；2、“vue-cli3”移除了static文件夾，新增public文件夾，并且將“index.html”移動(dòng)到了public中。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue-cli3和vue-cli2的區(qū)別是什么

vue-cli 3 的 github 倉(cāng)庫(kù)由原有獨(dú)立的 github 倉(cāng)庫(kù)遷移到了 vue 項(xiàng)目下

vue-cli 3 的項(xiàng)目架構(gòu)完全拋棄了 vue-cli 2 的原有架構(gòu)，3 的設(shè)計(jì)更加抽象和簡(jiǎn)潔（此處后續(xù)可以詳細(xì)介紹）

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 還是 webapck 3

vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化

由于 vue-cli 3 也學(xué)習(xí)了 rollup 的零配置思路，所以項(xiàng)目初始化后，沒(méi)有了以前熟悉的 build 目錄，也就沒(méi)有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

vue-cli 3 的設(shè)計(jì)原則是0配置，移除的配置文件根目錄下的 build 和config等目錄

移除了static文件夾，新增public文件夾，并且index.html 移動(dòng)到了public中

Vue-cli3 創(chuàng)建的項(xiàng)目的目錄結(jié)構(gòu)

vue_project

• -- node_modules  # 安裝的庫(kù)依賴

• -- public  # 相當(dāng)于vue-cli2中的static，打包后原封不動(dòng)的放在dist中

• -- src  # 源代碼

• -- .browserslistrc  # 配置瀏覽器相關(guān)的東西

• -- .gitignore  # 配置git相關(guān)的東西，可以配置忽略一些文件

• -- .babel.config.js  # 配置 babel

• -- package.json

• -- package-lock.json  # 顯示的真實(shí)的安裝版本(package.json中可能有~或者 ^ 后面加版本號(hào)，因此可能會(huì)安裝不同版本的依賴)

• -- readme.md  # markdown 文檔

啟動(dòng)項(xiàng)目以及打包項(xiàng)目

# 啟動(dòng)項(xiàng)目

npm run serve

# 打包項(xiàng)目

npm run build

注：這些命令都是在 package.json 的 script 中配置的

{
  "name": "vue3test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    # 運(yùn)行項(xiàng)目
    "serve": "vue-cli-service serve",
    # 打包項(xiàng)目
    "build": "vue-cli-service build"
  },
  # 運(yùn)行依賴
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
# 開發(fā)依賴
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}

關(guān)于“vue-cli3和vue-cli2的區(qū)別有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。