Vue CLI是一個(gè)強(qiáng)大的命令行工具，可以幫助我們快速創(chuàng)建Vue項(xiàng)目，輕松完成開發(fā)。當(dāng)我們完成了項(xiàng)目的編寫和調(diào)試后，就需要把它打包成一個(gè)壓縮文件以供部署和發(fā)布了。下面，我們就來了解一下使用Vue CLI進(jìn)行打包的步驟。

步驟一：進(jìn)入項(xiàng)目根目錄，打開終端，輸入以下命令安裝依賴。

npm install

步驟二： 在終端中輸入以下命令進(jìn)行打包，生成build目錄。

npm run build

步驟三：打包完成后，我們可以在項(xiàng)目根目錄下的build目錄里找到打包好的文件，其中包含一個(gè)壓縮文件和一個(gè)文件夾。我們可以將這些文件上傳到服務(wù)器，并且使用Web服務(wù)器進(jìn)行發(fā)布。

需要注意的是，在打包前，我們需要先修改config/index.js中的build選項(xiàng)，主要包括以下內(nèi)容：

module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
...
}
}

其中，assetsSubDirectory參數(shù)設(shè)置了靜態(tài)資源子目錄的名稱；assetsPublicPath是在dist目錄內(nèi)生成資源文件引用的前綴；productionSourceMap參數(shù)可以開啟或關(guān)閉source map。我們可以根據(jù)具體需求更改這些參數(shù)。

打包完成后，我們可以使用Nginx或Apache等Web服務(wù)器來部署我們的項(xiàng)目。