This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Error reason

When you import a VUE in this way in a project

import Vue from 'vue';
Copy the code

Do you want to project is used in node_modules/vue/dist/vue. Js file But in the latest edition of the Vue, the project is the default import node_modules/Vue/dist/Vue. Esm. Js file

Lookup rules for packages

Is there a node_modules folder in the project root directory

In node_modules, find the corresponding vue folder based on the package name

In the vue folder, look for a package configuration file called package.json

In the package.json file, look for a main property, which is the entry point for package loading

The solution

1. Locate the node_modules/vue/package.json file and change the value of the main configuration item

"module": "dist/vue.js".Copy the code

Or when importing vUE, you can specify the following path

import vue from '.. /node_modules/vue/dist/vue.js'
Copy the code

2 Add configuration items to your webpack.config.js configuration file and change the default imported vue file to vue.js


resolve: {
    alias: {
      vue: "vue/dist/vue.js",}},Copy the code

Do not forget to run NPM run dev again after modifying the configuration, otherwise the configuration will not take effect

The following is the WebPack configuration that I built for your reference only

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  entry: ["@babel/polyfill"."./src/index.js"].output: {
    filename: "bundle.js".path: path.resolve(__dirname, "dist"),},devtool: "inline-source-map".devServer: {
    contentBase: ". /",},externals: {
    vue: "Vue".'vue-router': 'VueRouter'.axios: 'axios'.vuex: 'Vuex'
  },
  resolve: {
    alias: {
      vue: "vue/dist/vue.js",}},plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",}).new VueLoaderPlugin(),
  ],
  module: {
    rules: [{test: /\.css$/,
        use: ["style-loader"."css-loader"],}, {test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],}, {test: /\.vue$/,
        loader: "vue-loader"}, {test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader".options: {
            cacheDirectory: true.presets: ["@babel/preset-env"].plugins: ["@babel/plugin-transform-runtime"],},},},],},};Copy the code

– entry

Package entry for the project

– output

path

Resolve (__dirname, ‘dist’) specifies where to put the packed file. The value must be an absolute path, usually __dirname+ ‘/build’ or path.resolve(__dirname, ‘dist’).

filename

Specify the name of the packaged file. For single-entry files, a fixed name can be used, such as’ build.js’. For multi-entry files, the name and ID are dynamically determined according to the properties of the multi-entry file object

– resolve

alias

Create an alias for import or require to make module introduction easier.

– module

Rules: Values are arrays

Use :{options}; use:{options}; use:{options};

– externals

Provides a way not to reference dependencies from bundles, such as vue being imported from HTML in script mode, which can be used to import dependencies from other modules

– plugins

Plugins provide complex functionality that loaders cannot do