Vue is not defined при использовании Webpack

Question

Разработка приложения Vue.js + webpack. После сборки приложения, получаю в консоли следующую ошибку: Vue is not defined

Мой webpack.config.js:

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin= require('html-webpack-plugin');
 
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },            
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                  use: [
                    'vue-style-loader',
                    'css-loader'
                  ]
             }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new VueLoaderPlugin()
    ],
    externals: {
        vue: 'Vue'
      }
}

package.json

{
  "name": "outletswebinterface",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "node-sass": "^7.0.1",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "vue": "^3.2.37",
    "vue-loader": "^17.0.0",
    "vue-loader-plugin": "^1.3.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "axios": "^0.27.2"
  },
  "dependencies": {
    "axios": "^0.27.2"
  }
}

.babelrc

{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ]
}

index.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB | Outlets</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Версия у Vue - 3 Подскажите пожалуйста, что тут могло пойти не так? Все необходимые пакеты (vue, vue-loader и т.д.) я поставил через npm. Есть ощущение что я что-то упустил, но вот только не могу понять что именно

БЛОГ НА HUSL

Vue is not defined при использовании Webpack

Ответы (0 шт):