照例先上官方文檔: cn.vuejs.org/v2/guide/in…html
- | UMD | CommonJS | ES Module (基於構建工具使用) | ES Module (直接用於瀏覽器) |
---|---|---|---|---|
完整版 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
只包含運行時版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
完整版 (生產環境) | vue.min.js | - | - | vue.esm.browser.min.js |
只包含運行時版 (生產環境) | vue.runtime.min.js | - | - | - |
完整版與運行時版的區別在於,運行時版不包含編譯器vue
// 須要編譯器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不須要編譯器
new Vue({
render (h) {
return h('div', this.hi)
}
})
複製代碼
若是在運行時版使用了template屬性,會報一下錯誤vue-cli
[Vue warn] : You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
複製代碼
使用import默認引入的是運行時版,能夠經過import Vue form 'vue/dist/vue'
解決瀏覽器
在經過vue-cli create生成的項目中能夠新建vue.config.js
bash
module.exports = {
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue'
}
}
}
}
複製代碼