VueJS 无法挂载组件

Posted 2023-02-23

【中文标题】VueJS 无法挂载组件

【英文标题】：VueJS Failed to mount component

【发布时间】：2018-11-18 17:57:38

【问题描述】：

我正在使用 Symfony Encore 在 VueJS 中开始一个新项目。一切似乎都在正确编译，除了我无法让 VueJS 工作。我想我缺少插件或其他东西？

这是我在控制台中的错误：

vue.esm.js:591 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <App> at assets\App.vue
       <Root>

我的 App.vue 是基本的：

<template>
   <div>
      <router-view></router-view>
  </div>
</template>

<script>
export default 
  name: 'app'


</script>

<style lang="scss-loader">
  /* Import Font Awesome Icons Set */
  /*$fa-font-path: '~font-awesome/fonts/';*/
  @import '~font-awesome/scss/font-awesome.scss';
  /* Import Simple Line Icons Set */
  /*$simple-line-font-path: '~simple-line-icons/fonts/';*/
  @import '~simple-line-icons/scss/simple-line-icons.scss';
  /* Import Bootstrap Vue Styles */
  @import 'bootstrap-vue/dist/bootstrap-vue.css';
  /*// Import Main styles for this application*/
  @import './assets/scss/style';
</style>

这是我的 main.js 文件：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router'

Vue.use(VueRouter)

const router = new VueRouter(
    mode: 'hash',
    linkActiveClass: 'open active',
    scrollBehavior: () => ( y: 0 ),
    routes: routes
);

router.beforeEach((to, from, next) => 
    console.log('Router is working');
    next();
);

new Vue(
  el: "#app",
  router,
  render: h => h(App),
)

我的 App.vue 有什么问题吗？我真的没有太多事情要做，所以我很困惑为什么它不会安装？

这是我的 package.json：

  "devDependencies": 
    "@symfony/webpack-encore": "symfony/webpack-encore",
    "vue": "^2.5.16",
    "vue-template-compiler": "^2.5.16",
    "webpack-notifier": "^1.6.0"
  ,
  "scripts": 
    "dev-server": "encore dev-server",
    "dev": "encore dev --progress=true",
    "watch": "encore dev --watch",
    "build": "gulp bump && encore production --progress=true"
  ,
  "dependencies": 
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-istanbul": "^4.1.6",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "bootstrap": "^4.1.1",
    "bootstrap-vue": "^2.0.0-rc.11",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "node-sass": "^4.9.0",
    "popper.js": "^1.14.3",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.1",
    "simple-line-icons": "^2.4.1",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.0",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^4.1.0"
  

【参考方案1】：

您的 vue 脚本将您的元素定义为 id 为“app”：

  el: "#app",

但是您的模板中没有这样的元素。

<template>
   <div>
     <router-view></router-view>
   </div>
</template>

您应该给 div 一个“app”的 id，以便您的视图脚本知道要定位什么：

<template>
   <div id="app">
     <router-view></router-view>
   </div>
</template>

【讨论】：

我在 symfony 的索引树枝文件中有 标签。这很好地引导了 vuejs。路由器立即将我带到 /dashboard，但随后显示挂载失败。