Javascript Vue未定义/不是构造函数
嗨,我知道有几个问题已经相关了,如果不是,完全相同,但由于某种原因,这些答案都不适合我,所以我想根据我的具体情况提出这个问题 因此,我已经使用了几个月的Javascript Vue未定义/不是构造函数,javascript,vue.js,webpack,laravel-mix,Javascript,Vue.js,Webpack,Laravel Mix,嗨,我知道有几个问题已经相关了,如果不是,完全相同,但由于某种原因,这些答案都不适合我,所以我想根据我的具体情况提出这个问题 因此,我已经使用了几个月的laravel mix和vuejs,为了给大家一个背景,我对使用webpack或bundler非常陌生。我开始使用laravelmix,因为它是一个项目所必需的,从那时起,我甚至在单独的项目中使用它。现在我正在使用新版本的laravelmix和vuejs,我似乎无法让vuejs工作 首先让我向您展示我的webpack.mix.js: const
laravel mix
和vuejs
,为了给大家一个背景,我对使用webpack或bundler非常陌生。我开始使用laravelmix
,因为它是一个项目所必需的,从那时起,我甚至在单独的项目中使用它。现在我正在使用新版本的laravelmix
和vuejs
,我似乎无法让vuejs
工作
首先让我向您展示我的webpack.mix.js
:
const mix = require("laravel-mix")
mix.js('src/javascript/app.js', 'assets').extract(['vue', 'vue-lazysizes', 'flickity', 'axios'])
.vue()
.sass('src/style/app.scss', 'assets')
.options({
postCss: [require('tailwindcss')]
})
这是我的包.json
:
{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "webpack.mix.js",
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@vue/compiler-sfc": "^3.0.11",
"autoprefixer": "^10.2.5",
"laravel-mix": "^6.0.13",
"lato-font": "^3.0.0",
"postcss": "^8.2.8",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"tailwindcss": "^2.0.3",
"vue-compiler": "^4.2.1",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"axios": "^0.21.1",
"flickity": "^2.2.2",
"lazysizes": "^5.3.0",
"vue": "^3.0.11",
"vue-lazysizes": "^1.0.5"
}
}
这就是我的app.js
看起来的样子:
import Vue from "vue";
import axios from 'axios';
import Flickity from 'flickity';
import vueLazysizes from 'vue-lazysizes';
export default {
directives: {
lazysizes: vueLazysizes
}
}
// window.Vue = Vue;
window.Flickity = Flickity;
window.axios = axios;
require("./modules/_global")
require("./modules/_index")
这是我的第一个Vue
对象:
let featured = new Vue({
el: '.featured--vue_js',
delimiters: ['${','}'],
data: {
loadingAnimation: true,
requestComplete: false
},
created(){
this.requestData()
},
methods: {
requestData(){
console.log(this)
}
}
})
现在问题来了,每次我取消注释window.Vue=Vue
作为一个全局对象,我得到一个错误uncaughttypeerror:Vue不是构造函数
现在我尝试删除它,它给我的错误是uncaughtreferenceerror:Vue未定义
如果我尝试window.Vue=require('Vue')代码>它给我未捕获类型错误:Vue不是构造函数
再次
如果我尝试在Vue对象const Vue=require('Vue')之前声明代码>它仍然给我未捕获类型错误:Vue不是构造函数
我整晚都在做这个,我不明白为什么它不工作,所以我现在真的需要帮助,因为我要用Vue
构建很多安静的函数,如果我不能让它工作,那对我来说真的很糟糕
所以非常感谢你!请不要立即将此标记为重复,因为没有任何答案对我有效。。谢谢你的回答 您的初始化代码似乎是针对Vue 2的:
从“Vue”导入Vue
let featured=新Vue({
el:“.特色--vue_js”,
/*...*/
})
但是您的项目已安装Vue 3,因此您应该使用Vue 3的:
从“vue”导入{createApp}
let featured=createApp({
/*...*/
}).mount('.featured--vue_js')
您的初始化代码似乎是针对Vue 2的:
从“Vue”导入Vue
let featured=新Vue({
el:“.特色--vue_js”,
/*...*/
})
但是您的项目已安装Vue 3,因此您应该使用Vue 3的:
从“vue”导入{createApp}
let featured=createApp({
/*...*/
}).mount('.featured--vue_js')
您是否尝试按照建议在.vue()
中指定vue版本您是否尝试按照建议在.vue()
中指定vue版本