Vue Is Not a Constructor
I Using Webpack, After Build and Run in Chrome Show This Error, I Don't Know How to Solve It. My Code Is Very Simple: { "Devdependencies": { "Babel-Core"...
I using webpack, after build and run in chrome show this error,I don't know how to solve it.
My code is very simple:
{
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "5",
"css-loader": "^0.26.1",
"html-webpack-plugin": "^2.28.0",
"vue-hot-reload-api": "^2.0.9",
"vue-html-loader": "^1.2.3",
"vue-loader": "10.0.3",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"vue": "^2.1.10"
}
}
5 Answers
The issue is that Vue latest library has been updated, so we need to specify the version in the script tag
Please, replace the tag
<script src=""></script>
By
<script src="[email protected]/dist/vue.min.js"></script>
Vue is the default export from that library so you import like this.
import Vue from 'vue'
I faced this problem while I was learning Vue. My tutorial was from Vue 2 and I was using Vue 3.
So I solved it by replacing
let app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
},
});
to this
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello Vue!",
};
},
}).mount("#app");
You need to import the runtime only build. This comment in the Github issues explains.
Put this in your webpack.config.js.
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}
i just replace this file
<script src=""></script>
to
<script src="[email protected]/dist/vue.js"></script>
in my code and the error ("Vue is not a constructor") is remove
Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.
