webpack搭建项目You are using the runtime-only build of Vue where the template compiler is not available.

@自己使用webpack搭建项目运行环境出现## You are using the runtime-only build of Vue where the template compiler is not available.问题

报错原因

当你在项目中以这种方式导入vue时

import Vue from 'vue';

你希望项目中使用的是node_modules/vue/dist/vue.js文件
但是在最新版的Vue中，项目默认导入的是node_modules/vue/dist/vue.esm.js文件

解决方法

在你的webpack.config.js配置文件中加入配置项，更改项目默认导入的vue文件为vue.js

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

下面的是我自己搭建的webpack配置，仅供参考

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"],
          },
        },
      },
    ],
  },
};