I'm trying to compile my Vue.js app with webpack
but I get this warning in the browser.
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.
What does this mean? How do I resolve the error?
This error pops up if you try to use non-precompiled Vue templates.
To fix this, set the runtimeCompiler
option in vue.config.js
to true
:
module.exports = {
runtimeCompiler: true
}
Note that this will include additional JavaScript payload into your distribution.
Alternatively, you can use precompiled Vue templates.
This is because the version of vue
without the template compiler (needed) is included by default. To override this default, add this to your webpack.config.js
:
// webpack.config.js
{
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
},
}
Source: https://github.com/vuejs-templates/webpack/issues/215
I still had an error after setting the runtimeCompiler to true in vue.config.js
file.
You can simply edit your src/main.js file
from : import Vue from 'vue'
to : import Vue from 'vue/dist/vue.js';
If you compile your app with vue-cli-service add the following code to vue.config.js
depending upon compiler:
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
If you compile your app with webpack add the following code to webpack.config.js
:
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}
Use render function
new Vue({
el: 'body',
render: function(createElement) {
return createElement(hello)
} });
For me, it was a typo (lowercase). I had:
import Vue from "Vue";
instead of
import Vue from "vue";
不定期副业成功案例分享