在Vue開(kāi)發(fā)過(guò)程中，我們通常使用的是Vue-cli來(lái)進(jìn)行開(kāi)發(fā)。而其中一個(gè)常用的命令就是“run build”，這個(gè)命令的作用是將Vue應(yīng)用打包成一個(gè)靜態(tài)文件，用于部署到生產(chǎn)環(huán)境中。

打包后的靜態(tài)文件一般包含了HTML、CSS、JavaScript以及其他相關(guān)的資源文件，這些文件都會(huì)被壓縮和混淆，從而減小文件的體積，提高網(wǎng)站的加載速度。除此之外，靜態(tài)文件的打包還可以減少網(wǎng)站的請(qǐng)求次數(shù)，從而提高網(wǎng)站的性能。

vue-cli-service build

這個(gè)命令會(huì)自動(dòng)在根目錄下生成一個(gè)名為“dist”的文件夾，里面就包含了我們打包后的靜態(tài)文件。可以在配置文件中進(jìn)行相應(yīng)的配置，修改輸出文件夾名稱，或者修改打包后生成靜態(tài)文件的路徑等。

//webpack.prod.conf.js
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}

當(dāng)然，有時(shí)候我們?cè)诖虬斑€需要進(jìn)行一些其他的操作，比如說(shuō)修改某個(gè)環(huán)境變量、修改一些配置參數(shù)等。那么，在vue-cli中，我們可以使用自定義的腳本來(lái)實(shí)現(xiàn)這些操作。

//獲取 cli-plugin-style-resources-loader 插件
const StyleResourcesLoader = require('style-resources-loader')
module.exports = {
configureWebpack: {
plugins: [
//注入全局scss
new StyleResourcesLoader({
preProcessor: 'scss',
patterns: [path.resolve(__dirname, './src/assets/scss/_color.scss')]
})
]
}
}

在項(xiàng)目中，我們可以在package.json文件中的scripts字段里面添加自定義命令，這樣就可以直接使用npm命令來(lái)調(diào)用這些腳本。比如說(shuō)，我們可以這樣來(lái)添加一個(gè)buildDev命令。

//package.json中的scripts
"scripts": {
"buildDev": "npm run build --dev"
}

在上述代碼中，我們通過(guò)“npm run build”命令來(lái)調(diào)用vue-cli-service build命令，并通過(guò)“--dev”參數(shù)來(lái)傳遞一些開(kāi)發(fā)環(huán)境下需要的配置參數(shù)。這樣，我們就可以方便地進(jìn)行一些針對(duì)開(kāi)發(fā)環(huán)境的打包操作。

總之，通過(guò)vue-cli的run build命令，我們可以方便地將Vue應(yīng)用打包成靜態(tài)文件，進(jìn)行部署到生產(chǎn)環(huán)境中。除此之外，我們還可以通過(guò)自定義腳本來(lái)實(shí)現(xiàn)一些針對(duì)特定環(huán)境的打包操作。這個(gè)命令的使用非常簡(jiǎn)單，但是如果要進(jìn)行一些高級(jí)的配置，可能需要我們對(duì)Vue的打包原理有一定的了解。