Question

试图建立我的第一个电子＆amp;带有webpack的vue.js应用程序，并遇到了我的vue组件未呈现的问题。

webpack.config.js：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './app/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
        {
            test: /\.vue$/,
            use: {
              loader: 'vue-loader'
            }
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['es2015'],
                plugins: ['transform-runtime']
              }
            }
        }
    ]
  },
  plugins: [
    new webpack.ExternalsPlugin('commonjs', [
      'electron'
  ])
  ]
}

main.js（电子入口点）：

const electron = require('electron');

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

var createWindow = () => {
    mainWindow = new BrowserWindow({width: 800, height: 600});
    mainWindow.loadURL('file://' + __dirname + '/index.html');
    mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

index.html（由电子呈现）：

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <app></app>
  <script src="dist/bundle.js"></script>
</body>

</html>

app / App.vue（vue root component）：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
      return {
          msg: "root component"
      }
  }
}
</script>

app / main.js（webpack入口点）：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: 'app',
  components: { App }
})

然后我运行webpack来创建bundle.js，它执行没有任何问题。但是当我运行npm run start（又名电子main.js）时，我得到一个空白屏幕，当我检查代码时，它似乎缺少app-tag：

resulting electron window

如果我改变了＆＃39; el：＆＃34; app＆＃34;＆＃39; to＆＃39; el：＆＃34; body＆＃34;＆＃39;整个身体甚至都不见了。

这是我第一次尝试处理这些技术而且我不知道什么是错的 - 有什么帮助吗？

Answer 1

所以我自己想出了解决方案。如果在app / main.js中我替换

components: { App }

与

render: h => h(App)

它有效。

如果有人知道原因，请告诉我。

vue html-tag无法在电子

1 个答案: