Vue-CLI服務命令
在說Vue-CLI項目結構的時候，先來說下Vue-CLI常用的服務命令
CLI 服務 ( @vue/cli-service ) 是一個開發環境依賴。針對絕大部分應用優化過的內部的 webpack 配置；
在一個 Vue CLI 項目中， @vue/cli-service 模塊安裝了一個名為 vue-cli-service 的命令。
在 package.json 中的 scripts 指定 vue-cli-service 相關命令。
- serve 啟動一個開發環境服務器(基於 webpack-dev-server)，修改組件代碼后，會自動熱模塊替換
- build 會項目根目錄下自動創建一個 dist/ 目錄，打包后的文件都在其中，打包后的 js 會自動生成后綴為 .js 和 .map 的文件。js文件: 是經過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法准確定位到哪里的代碼報錯。map文件：文件比較大， 代碼未加密，可以准確的輸出是哪一行哪一列有錯。
- lint 使用 Eslint 進行檢查並修復代碼的規范，比如: 將 main.js 中的格式多加個空格 ，執行 npm run lint 后它會自動的去除多余空格 。
執行命令方式：
npm run serve
npm run build
npm run lint
Vue-CLI項目結構
在之前我們使用Vue-CLI自定義創建的項目結構如下
|-- node_modules: # 存放下載依賴的文件夾 |-- public: # 存放不會變動靜態的文件，它與src/assets的區別在於，public目錄中的文件不被webpack打包處理，會原 樣拷貝到dist目錄下 |-- index.html: # 主頁面文件 |-- favicon.ico: # 在瀏覽器上顯示的圖標 |-- src: # 源碼文件夾 |-- assets: # 存放組件中的靜態資源 |-- components: # 存放一些公共組件 |-- views: # 存放所有的路由組件 |-- App.vue: # 應用根主組件 |-- main.js: # 應用入口 js |-- .browserslistrc: # 指定了項目可兼容的目標瀏覽器范圍, 對應是package.json 的 browserslist選項 |-- .eslintrc.js: # eslint相關配置 |-- .gitignore: # git 版本管制忽略的配置 |-- babel.config.js: # babel 的配置,即ES6語法編譯配置 |-- package-lock.json: # 用於記錄當前狀態下實際安裝的各個包的具體來源和版本號等, 保證其他人在 npm install 項目時大家的依賴能保證一致. |-- package.json: # 項目基本信息,包依賴配置信息等 |-- postcss.config.js: # postcss一種對css編譯的工具，類似babel對js的處理 |-- README.md: # 項目描述說明的 readme 文件
關於 browsers 的配置如下：
代碼 含義 last 2 versions 每一個主流瀏覽器的最后5個版本 last 2 Chrome versions 谷歌瀏覽器的最后兩個版本 > 2% 市場占有量大於2% > 2% in US 美國市場占有量大於2% ie 6-8 ie瀏覽器6-8 Firefox > 20 火狐版本>20 Firefox < 20 火狐<20 since 2013 2013年之后發布的所有版本 iOS 7 指定IOS 7瀏覽器
自定義配置
前面我們使用Vue-CLI自動生成項目，但往往滿足不了我們實際開發項目的需求。
vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。
官網：https://cli.vuejs.org/zh/config/
先創建一個vue.config.js文件
這個文件應該導出一個包含了選項的對象：
// vue.config.js module.exports = { // 選項... }
常用的配置
module.exports = { // 選項... // publicPath: '/demo2', devServer: { port: 8001, // 端口號，如果端口號被占用，會自動加1 host: "localhost", //主機名， 127.0.0.1， 真機 0.0.0.0 https: false, //協議 open: true //啟動服務時自動打開瀏覽器訪問 }, lintOnSave: false, // 默認true，警告會被輸出到命令行，但不會使得編譯失敗。如果為false，則不輸出警告 outputDir: "dist2", // 打包之后所在目錄， 默認值 dist assetsDir: "assets", // 靜態資源打包之后 存放路徑 ，（相對於outputDir指定的路徑）, 默認值 '' indexPath: "out/index.html", // index.html 主頁面打包之后存放的目錄（相對於outputDir指定的路徑），默認值 index.html productionSourceMap: false, // 打包時不會生成 .map 文件，加快打包速度 // filenameHashing: false, 打包時，靜態文件不會生成hash值，一般不要這個 }
然后執行下面命令進行構建
npm run build
生成的目錄結構如下
