用vue-cli搭建乙個前端開發環境確實是極其方便，在寫前端**肯定也是少不了需要呼叫後台提供的業務介面進行前後端互動，特別在敏捷開發中，前後端都要提前確定業務介面並進行打樁，在開發過程中基本是沒有現成的後台可以呼叫，基本上都是自己寫mock進行模擬。
在vue-cli搭建的專案中，框架上用的是express的web框架，要做乙個mock是很方便的。
假設前端頁面上需要獲取所有的新聞列表，那麼就需要mock乙個能夠返回所有新聞列表資料的介面。
接下來就在專案中實現mock功能。
腳手架生成專案
執行命令用webpack模板生成乙個名為vuestrap的專案（名字任意）
vue init webpack vue-mock-demo在出現的各提示選項中，沒什麼要求，為了方便，把不用的eslint，unit tests，e2e都關掉（這些選項都隨意）。
? project name vuestrap選項選完，專案也就生成了。? project description a vue.js project
? author 省略
? vue build standalone
? install vue-router? yes
? use eslint to lint your code? no
? setup unit tests with karma + mocha? no
? setup e2e tests with nightwatch? no
執行命令，安裝腳手架建立的元件
npm install建立mock和build、config等資料夾同級建立乙個mock資料夾。
為了要mock乙個獲取新聞列表的資料介面，我們在mock資料夾下建立乙個名為「router-news.js」的檔案。
其中的內容為：
var express = require('express');
var router =express.router();
//對所有新聞的get進行mock
router.get('/all', function
(req, res, next) ,
]);});module.exports = router;
這裡的完整url應該是「/mock/news/all」，在這裡只寫了「/all」子路徑。
在build/dev-server.js檔案的頭部require區域，require上面寫的router。
var mockrouternews = require('../mock/router-news')注意：
執行
在命令列中執行命令執行專案。
npm run dev執行後，在瀏覽器的位址列中補上mock的url並訪問，就能看到mock的資料了，很方便。
vue cli 搭建專案中，img引用資源404
vue cli 3.0搭建專案，create 以後，在某個頁面，引用資源，資源路徑沒問題，run serve 除錯，就是顯示不出來，前台頁面開啟，f12檢視 發現serve時瀏覽器解析這段路徑為主網域名稱加位址了 查閱資料發現，vue cli3中內建的webpack會把當做乙個模組引用，然後打包等等...
用Vue cli搭建的專案中引入css報錯的原因
經過一番折騰之後發現需要在build檔案下的webpack.base.conf.js中加上下面的 即可 另外說明下假如你的css檔案是在src目錄下的話就新增src的路徑，如上圖，element ui或者mint ui minit ui的我沒試過，個人認為也要加上去webpack才能查詢到 假如你的...
Vue cli搭建的專案中路徑別名的配置
首先展示一下專案結構 對照專案結構配置 在專案根目錄下建立vue.config.js檔案 module.exports 使用cli3.x建立的專案在配置路徑別名時可以使用 代表src，在node modules vue cli service lib config base.js檔案中已經配置好的使...