Vue 未定义/不是构造函数答案

【问题标题】：Vue is not defined/not a constructorVue 未定义/不是构造函数
【发布时间】：2021-07-15 19:09:52
【问题描述】：

您好，我知道有几个问题已经相关，如果不是，完全一样，但由于某种原因，这些答案都对我不起作用，所以我想根据我的具体情况提出这个问题。

所以我已经使用laravel-mix 和vuejs 几个月了，只是为了给你一个背景知识，我对使用 webpack 或捆绑器非常陌生。我开始使用laravel-mix，因为它是一个项目所必需的，从那时起我就一直在使用它，即使是在单独的项目中。现在我正在使用新版本的laravel-mix 和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')]
   })

这是我的package.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; 以将 Vue 贴为全局对象时，我都会收到 Uncaught TypeError: Vue is not a constructor 的错误

现在我尝试删除它，它给了我Uncaught ReferenceError: Vue is not defined的错误

如果我尝试window.Vue = require('vue');，它会给我Uncaught TypeError: Vue is not a constructor 再次

如果我尝试在我的 Vue 对象 const Vue = require('vue'); 之前声明它仍然给我 Uncaught TypeError: Vue is not a constructor

而且我整晚都在这样做，我不明白为什么它不起作用，所以我现在真的需要帮助，因为我将使用 Vue 构建安静的很多功能，如果可以的话'不让它工作对我来说真的很糟糕。

非常感谢您！请不要立即将此标记为重复，因为没有任何答案对我有用。谢谢那些愿意回答的人！

【问题讨论】：

你有没有按照here的建议在.vue()中指定vue版本

标签： javascript vue.js webpack laravel-mix

【解决方案1】：

您的初始化代码似乎适用于 Vue 2：

import Vue from 'vue'

let featured = new Vue({
    el: '.featured--vue_js',
    /*...*/
})

但是你的项目安装了 Vue 3，所以你应该使用 Vue 3 的createApp()：

import { createApp } from 'vue'

let featured = createApp({
    /*...*/
}).mount('.featured--vue_js')

【讨论】：