[Vue warn]：挂载组件失败：模板或渲染函数未定义。发现于 ---> <App> 在 src/App.vue <Root>

Question

我通过以下设置收到上述错误：

import Vue from 'vue';
import App from './App.vue';  // Import the App component
console.log(App);
import VueRouter from 'vue-router';
import mypage from './components/pages/mypage/MyPage.vue';

Vue.config.productionTip = false;
Vue.use(VueRouter);

const routes = [
  {
    path: '/mypage',
    component: mypage,
  }
];

const router = new VueRouter({
  mode: 'history',  // This removes the hash from the URL
  routes,
});

document.addEventListener('DOMContentLoaded', function() {
  console.log('Attempting to initialize Vue...');
  new Vue({
    render: h => h(App),
    router,
  }).$mount('#app');
});

和我的App.vue：

 <template>
  <div id="app">
    <h1>Welcome to Vue.js!</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style scoped>
/* Add your CSS here */
</style>

这是一个在 vue 2.6 上运行的 vue-cli 应用程序，这是我的 package.json：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --entry ./src/app.js",
    "build": "vue-cli-service build --entry ./src/app.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.7.7",
    "core-js": "^3.8.3",
    "path-browserify": "^1.0.1",
    "vue-carousel": "^0.18.0",
    "vue-recaptcha": "^3.0.0-alpha.6",
    "vue-router": "^3.6.5",
    "vue-slick-carousel": "^1.0.6",
    "vue-svg-loader": "^0.16.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@types/node": "^22.8.1",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "^5.0.8",
    "css-loader": "^3.6.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "node-sass": "^4.14.1",
    "raw-loader": "^4.0.2",
    "sass-loader": "^7.3.1",
    "ts-loader": "^8.0.18",
    "typescript": "^5.6.3",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.8",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.14"
  },
  "resolutions": {
    "vue-loader": "15.9.8"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

和我的 vue.config.js

const { defineConfig } = require('@vue/cli-service');
const { VueLoaderPlugin } = require('vue-loader');  // Import the plugin
const path = require('path');

module.exports = defineConfig({
  filenameHashing: false,
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production'
    ? '/sites/all/modules/custom/vue_pages_module/'
    : '/',
  outputDir: path.resolve(__dirname, '../dist'),
  assetsDir: 'static',
  devServer: {
    host: 'localhost',
    port: 8080,
    open: false,
    client: {
      overlay: { 
        warnings: true,
        errors: true,
      },
    },
    proxy: {},
  },
  configureWebpack: {
    entry: './src/app.js',
    devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval-source-map',
    resolve: {
      fallback: {
        "path": require.resolve("path-browserify")
      },
      alias: {
        '@assets': path.resolve(__dirname, 'src/assets')
      }
    },
    module: {
      rules: [
        {
          test: /\.svg$/,
          use: 'vue-svg-loader'
        },
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          },
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin()  // Add this line
    ]
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/sass/global/variables.scss"; @import "@/assets/sass/global/mixins.scss";`
      }
    }
  },
  productionSourceMap: false
});

我尝试安装不同的 vue 加载器版本并以不同的方式设置我的应用程序 js，我总是收到此错误。我的 App.vue 控制台日志也没有返回任何内容。

Answer 1

删除 App.vue 文件中的 id="app"