問題場景

使用Vue.extend時

<template><div><div id="mount-point"></div></div> </template> <script> import Vue from 'vue' export default {mounted() {const Profile = Vue.extend({data() {return {firstName: 'Yan',lastName: 'Hello',alias: '最后'}},template: '<p>{{firstName}} {{lastName}} 組合 {{alias}}</p>'})new Profile().$mount('#mount-point')}, } </script>

運行后報
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

原因是：
項目中使用的構(gòu)建版本是runtimeonly，要讓上面代碼有效應(yīng)該在vue.config.js中配置

module.exports = {runtimeCompiler: true, }

runtimeonly與runtimeCompiler

runtimeCompiler：完整版（運行時+編譯器）

編譯器：用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼。
運行時：用來創(chuàng)建 Vue 實例、渲染并處理虛擬 DOM 等的代碼。基本上就是除去編譯器的其它一切。

如果你需要在客戶端編譯模板 (比如傳入一個字符串給 template 選項，或掛載到一個元素上并以其 DOM 內(nèi)部的 HTML 作為模板)，就將需要加上編譯器，即完整版：

// 需要編譯器 import Vue from 'vue' import App from '@/App' new Vue({el: "#app",components: { App },template: "<App />" })

是不在打包時進行編譯的，是在客戶端（瀏覽器）運行時進行編譯的，所以要使用待編譯器的完整版本

runtimeonly: 只包含運行時

當(dāng)使用 vue-loader 或 vueify 的時候，*.vue 文件內(nèi)部的模板會在構(gòu)建時預(yù)編譯成 JavaScript。你在最終打好的包里實際上是不需要編譯器的，在瀏覽器中可直接運行，所以只用運行時版本即可。

// 不需要編譯器 import Vue from 'vue' import App from '@/App' new Vue({el: "#app",render: h => h(App) })

因為運行時版本相比完整版體積要小大約 30%，所以應(yīng)該盡可能使用這個版本。如果你仍然希望使用完整版，則需要在打包工具里配置一個別名：

module.exports = {// ...resolve: {alias: {'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'}} }

對比

下圖為兩種模式下，npm run dev后，在谷歌控制臺查看main.js引入的vue文件版本
runtimeonly

runtimeCompiler

因為在 Vue.js 2.0 中，最終渲染都是通過 render 函數(shù)，如果寫 template 屬性，則需要編譯成 render 函數(shù)，那么這個編譯過程會發(fā)生在運行時，所以需要帶有編譯器的版本。很顯然，這個編譯過程對性能會有一定損耗，所以通常我們更推薦使用 Runtime-Only 的 Vue.js。

組件上做一些新邏輯功能

extend.js

import Vue from 'vue' import Toast from '@/components/Toast' const Toast=Vue.extend(Toast) //......Profile相關(guān)代碼 export {Profile,Toast }

使用

<template><div><div id="mount-point"></div></div> </template> <script> import {Profile} from '../extend' export default {mounted() {new Profile().$mount('#mount-point')}, } </script>

總結(jié)

以上是生活随笔為你收集整理的vue.extend的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。