Vue-cli是Vue官方提供的CLI工具，用于搭建基于Vue的單頁面應用。Vue-cli提供了一系列的工具和插件，能夠快速搭建起一個基礎的Vue工程。Vue-cli在搭建工程的時候，自帶了webpack等框架和工具，使得開發過程中無須手動去配置webpack、babel等工具，從而使worker能夠更專注于應用功能的編寫。

在Vue-cli中，可以通過build工具進行項目構建。常用的build指令有兩種，一種是build并且打包到生產環境，另一種是build并且打包到開發環境。使用build工具進行構建后，我們就可以得到一個對于應用而言非常重要的文件夾--dist文件夾。dist文件夾包含應用的所有代碼和資源，在我們部署應用時就需要將它們全部部署到服務器上。

npm run build       // build到生產環境
npm run build-dev   // build到開發環境

在構建應用的過程中，我們可能會遇到一些問題，例如資源文件的路徑問題。這是因為webpack默認會將所有圖片、字體等文件都進行base64編碼后，插入到javascript文件中，從而達到減少HTTP請求次數的目的。但是當某些文件存在較大的時候，這種方式并不可取，我們需要改變它的路徑。

module.exports = {
chainWebpack: config =>{
config.module
.rule('images')
.use('url-loader')
.tap(options =>Object.assign(options, { limit: 10240, name: '[name].[ext]' })
);
}
}

我們通過如上代碼配置后，webpack會在應用構建時，將圖片根據其大小進行判斷，如果小于10KB，就將它們視為小圖片，進行base64編碼；否則，就將它們存儲在我們所指定的路徑中。

在圖片大小比較大的時候，我們還可以引入imagemin-webpack-plugin來對圖片進行壓縮，從而減小文件體積，提高應用的加載速度。

npm install imagemin-webpack-plugin -D

const ImageminPlugin = require('imagemin-webpack-plugin').default;
module.exports = {
//...
configureWebpack: {
plugins: [
new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
],
},
};

通過上述的方式，我們使得應用在打包時可以更加完美的支持圖片，同時也能夠優化應用的性能。如有不懂，歡迎留言評論。謝謝。