vue-cli目錄結構：

vue-cli目錄解析：

1. build 文件夾：用於存放 webpack 相關配置和腳本。開發中僅 偶爾使用 到此文件夾下 webpack.base.conf.js 用於配置 less、sass等css預編譯庫，或者配置一下 UI 庫。
2. config 文件夾：主要存放配置文件，用於區分開發環境、線上環境的不同。 常用到此文件夾下 config.js 配置開發環境的 端口號、是否開啟熱加載 或者 設置生產環境的靜態資源相對路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。
3. dist 文件夾：默認 npm run build 命令打包生成的靜態資源文件，用於生產部署。
4. node_modules：存放npm命令下載的開發環境和生產環境的依賴包。
5. src: 存放項目源碼及需要引用的資源文件。
6. src下assets：存放項目中需要用到的資源文件，css、js、images等。
7. src下componets：存放vue開發中一些公共組件：header.vue、footer.vue等。
8. src下emit：自己配置的vue集中式事件管理機制。
9. src下router：vue-router vue路由的配置文件。
10. src下service：自己配置的vue請求後臺接口方法。
11. src下page：存在vue頁面組件的文件夾。
12. src下util：存放vue開發過程中一些公共的.js方法。
13. src下vuex：存放 vuex 為vue專門開發的狀態管理器。
14. src下app.vue：使用標簽<route-view></router-view>渲染整個工程的.vue組件。
15. src下main.js：vue-cli工程的入口文件。
16. index.html：設置項目的一些meta頭信息和提供<div id="app"></div>用於掛載 vue 節點。
17. package.json：用於 node_modules資源部 和 啟動、打包項目的 npm 命令管理。

config文件夾 下 index.js 的對於工程 開發環境 和 生產環境 的配置

build 對象下 對於 生產環境 的配置：

• index：配置打包後入口.html文件的名稱以及文件夾名稱
• assetsRoot：配置打包後生成的文件名稱和路徑
• assetsPublicPath：配置 打包後 .html 引用靜態資源的路徑，一般要設置成 "./"
• productionGzip：是否開發 gzip 壓縮，以提升加載速度

dev 對象下 對於 開發環境 的配置：

• port：設置端口號
• autoOpenBrowser：啟動工程時，自動打開瀏覽器
• proxyTable：vue設置的代理，用以解決 跨域 問題

常用對象解析：

• scripts：npm run xxx 命令調用node執行的 .js 文件
• dependencies：生產環境依賴包的名稱和版本號，即這些 依賴包 都會打包進 生產環境的JS文件裏面
• devDependencies：開發環境依賴包的名稱和版本號，即這些 依賴包 只用於 代碼開發 的時候，不會打包進 生產環境js文件 裏面。

vue-cli 工程目錄結構介紹 詳細介紹