VUE是一種輕量級的前端框架，它采用了MVVM(Model-View-ViewModel)的架構模式，是一個用于構建用戶界面的漸進式框架。VUE支持熱重載，組件化開發，數據雙向綁定，指令等特性，而且這些特性使得它在前端業界受到了廣泛的關注和好評。
那么接下來我們來講一下VUE獨立編譯打包，vue-cli提供了一種構建和打包工具，可以方便地將你的代碼打包成生產環境要用到的JavaScript資產。不過對于我們需要對構建過程進行自定義而不是使用默認配置來對代碼進行優化時，我們通過獨立編譯打包就可以輕松實現這種需求。
VUE提供了一個構建工具vue-loader以及一組生產模板，可以輕松將單個Vue文件編譯成JavaScript模塊。我們可以在Webpack的構建系統中使用vue-loader，把Vue組件編譯成Javascript代碼，同其它的Javascript模塊類倆使用，進行代碼壓縮、混淆等優化工作。
你的VUE組件：
//App.vue
<template>
<div>
<h1>這是一個demo</h1>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
h1 { color: red; }
</style>
你的entry文件：
//main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h =>h(App)
})以上是簡單的Vue組件代碼，我們將其編寫在單獨的文件中，并在entry文件中引用它。要使用獨立打包，首先我們需要構建一個VUE-loader的打包配置。
配置vue-loader：
module: {
rules: [
// ... 其它規則
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
配置完了，我們就可以通過webpack對打包后的文件進行染色、壓縮等操作。如果我們需要打包后的組件單獨在一個頁面中運行，我們需要將打包后的文件引入一個html頁面中。
在這個html頁面中加入如下代碼即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>現在我們重新構建項目，然后把dist/build.js中的JavaScript復制到上面的html文件中，然后你就可以運行你的獨立打包的Vue組件啦。