使用electron-vue时的文件列表而不是渲染页面（带电子的vue.js）

Question

我对vue.js和电子很新。我试图用一些javascript渲染页面。 所以我有这些.vue文件或组件。据我所知，这些只能包含一个脚本标记。所以每当我向脚本添加任何内容时。应用程序中断并向我显示一个显示文件的目录

如果我不修改dashboard.vue中的脚本，这就是应用程序的表现方式

如果我在dashboard.vue的脚本中更改任何内容，这就是它的表现方式

仪表板暂时不包含任何脚本。但是，当我添加脚本标记时，会出现此问题。

我的信息中心脚本是

<script>
export default {
  name : 'Dashboard',
  data(){
    return  {
      msg : "Welcome"
    }
  }
}
</script>

这是路由器的配置方式。如果我在dashboard.vue

中没有脚本标记，它可以正常工作

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: require('@/components/Dashboard').default
    },
    {
      path: '/Products',
      name: 'Products',
      component: require('@/components/Products').default
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

我想知道为什么会出现这种错误。我需要在从vue路由器加载仪表板时运行一些脚本。我试过查找这个问题。我找不到任何东西。我也不熟悉webpack和vue-loader。虽然我已经完成了文档。