В браузере пустая страница после сборки и запуска. Что может вызвать ошибку Vue / Webpack?

Question

После выполнения команды # yarn serve и запуска собранного бандла на локальном сервере браузер огорчил пустой страницей с ошибкой:
Uncaught TypeError: _vue.default is not a constructor

Попробовал гуглить подобные ошибки, ничего вразумительного и подсказки решения ошибки не нашел. Нужна помощь специалистов. Разработку веду в WebStorm.

Изображения

package.json

{
  "name": "Project",
  "version": "0.1.0",
  "private": true,
  "description": "Project:: webpanel",
  "author": "Matvey U",
  "scripts": {
    "dev": "webpack serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "main": "test_serv.js",
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@coreui/coreui": "^3.4.0",
    "@coreui/icons": "^2.0.0-rc.0",
    "@coreui/utils": "^1.3.1",
    "@coreui/vue": "^3.2.7",
    "@coreui/vue-chartjs": "^1.0.6",
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/vue-fontawesome": "^3.0.0-3",
    "@popperjs/core": "^2.6.0",
    "axios": "^0.21.1",
    "bcryptjs": "^2.4.3",
    "bluebird": "^3.7.2",
    "body-parser": "^1.19.0",
    "chokidar": "^3.5.1",
    "connect-history-api-fallback": "^1.6.0",
    "core-js": "^3.6.5",
    "cors": "^2.8.5",
    "dayjs": "^1.10.4",
    "es6-promise": "^4.2.8",
    "express": "^4.17.1",
    "js-cookie": "^2.2.1",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.11.13",
    "perfect-scrollbar": "^1.5.0",
    "random-js": "^2.1.0",
    "saslprep": "^1.0.3",
    "serve-favicon": "^2.5.0",
    "socket.io": "^3.1.0",
    "socket.io-client": "^3.1.0",
    "stylus": "^0.54.8",
    "v-axios": "^3.0.3",
    "v-clipboard": "^2.2.3",
    "vue": "^3.0.0",
    "vue-moment": "^4.1.0",
    "vue-router": "^4.0.0-0",
    "vue-sidebar-menu": "^4.7.4",
    "vue-tables-2": "^2.1.80",
    "vuelidate": "^0.7.6",
    "vuex": "^4.0.0-0",
    "vuex-persistedstate": "^4.0.0-beta.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "animate-sass": "^0.8.2",
    "babel-eslint": "^10.1.0",
    "css-loader": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.5",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "stylus-loader": "^3.0.2",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.45.0",
    "webpack-cli": "^4.4.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "keywords": [
    "Nodejs",
    "Express",
    "Mongoose",
    "MongoDB",
    "RestAPIs",
    "CRUD"
  ],
  "license": "MIT"
}

webpack.config.js

const WebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: [
        __dirname + '/src/main.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
        publicPath: '/',
        libraryExport: 'default'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '/'
                        },
                    },
                    'css-loader',
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                use: [
                    'url-loader'
                ]
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new WebpackPlugin({
            template: __dirname + '/public/index.html',
            inject: 'body'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false
        })
    ],
    resolve: {
        extensions: ['.js', '.vue', '.json', '.scss'],
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            '@': resolve('src'),
            styles: resolve('src/assets/scss')
        }
    },
    devServer: {
        contentBase: './public',
        port: 7700
    }
};

Answer 1

Вам нужно импортировать только сборку среды выполнения. Подробнее можете почитать здесь https://github.com/vuejs-templates/webpack/issues/215#issuecomment-238095102

Поместите это в свой webpack.config.js.

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

Answer 2

Чтобы vue 3 нормально работал с webpack без использования vite или vue cli, выполните следующие действия:

запустите package.json, например:

{
    "private": true,
    "name": "vue-3",
    "description": null,
   
}

установите последнюю версию vue: npm i --save vue@next vue-loader@next

Установите также зависимости разработчика, которые включают @vue/compiler-sfc, который заменяет vue-template-compiler

npm i -D @vue/compiler-sfc css-loader file-loader mini-css-extract-plugin
 url-loader webpack webpack-cli webpack-dev-server

создайте или отредактируйте свой webpack.config.js со следующим содержимым:

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env = {}) => ({
  mode: env.prod ? "production" : "development",
  devtool: env.prod ? "source-map" : "cheap-module-eval-source-map",
  entry: [
    require.resolve(`webpack-dev-server/client`),
    path.resolve(__dirname, "./src/main.js")
  ].filter(Boolean),
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/"
  },
  resolve: {
    alias: {
      // this isn't technically needed, since the default `vue` entry for bundlers
      // is a simple `export * from '@vue/runtime-dom`. However having this
      // extra re-export somehow causes webpack to always invalidate the module
      // on the first HMR update and causes the page to reload.
      vue: "@vue/runtime-dom"
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader"
      },
      {
        test: /\.png$/,
        use: {
          loader: "url-loader",
          options: { limit: 8192 }
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: !env.prod }
          },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ],
  devServer: {
    inline: true,
    hot: true,
    stats: "minimal",
    contentBase: __dirname,
    overlay: true,
    injectClient: false,
    disableHostCheck: true
  }
});

Добавьте скрипт dev для запуска вашего приложения:

{
    "private": true,
    "scripts": {
        "dev": "webpack-dev-server"
    },
    "dependencies": {
        "vue": "^3.0.2"
    },
    "name": "vue-3",
    "description": null,
    "devDependencies": {
      ...
    }
}

Заполните index.html следующим содержанием:

<link rel="stylesheet" href="/dist/main.css" />
<div id="app"></div>
<script src="/dist/main.js"></script>

Наконец запустите npm run dev визит http: // localhost: 8080 /

БЛОГ НА HUSL

В браузере пустая страница после сборки и запуска. Что может вызвать ошибку Vue / Webpack?

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