使用 ES5 时如何在 javascript 中渲染 .vue 文件？（尝试使用 webpack 和 vue-loader）

Question

我一直在尝试迁移一个 vue 项目，不幸的是我无法在我构建应用程序的地方使用 import/export。因此，为了简化我的问题，我从头开始创建了一个项目来构建一个没有 vue-cli 的 vue 组件。

在我创建 .vue 文件之前，我已经成功地使用 webpack 启动了 vue 应用程序，但在那之后我开始收到以下错误并且我的 .vue 文件无法呈现。

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

代码如下，我会尽量保持简单：

index.js

var Vue = require('vue');
var App = require('./App.vue').default;

var app = new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

index.html

<!DOCTYPE html>
<html>
<head>
    ... (meta stuff)
</head>
<body>
    <div id="app"></div>
</body>
    <script src="dist/bundle.js"></script>
</html>

最后是 webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        main: './index.js'
    },
    output: {
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.js'
        }
    },
    watch: true,
    mode: 'development',
    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      }
};

我运行webpack-dev-server --config ./webpack.config.js从npm获取webpack服务器运行ning。我也做了 webpack --config ./webpack.config.js 但后来我必须运行 chrome 中的 index.html 我认为运行安装服务器实际上可能对捆绑包更好。

我知道很多人都有类似的问题，但出于某种原因，none 我在那里找到的解决方案对我有用。如果您能帮助我解决这个问题，我将不胜感激。

这篇文章可能会有帮助，但我不确定如何用它修复我的项目： https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

根据要求编辑

dev-Dependencies 和依赖项：

{
  "name": "vueTest",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config ./webpack.config.js",
    "dev": "webpack-dev-server --config ./webpack.config.js"
  },
  "license": "MIT",
  "devDependencies": {
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "vue": "^2.5.16",
    "vue-router": "^3.0.1"
  }
}

Answer 1

由于 thanksd 的评论，什么起作用了：

var app = new Vue({
  el: '#app',
  render: function(h) { return h(App); }
})

但是，重要的是 var App = require('./App.vue').default; 尤其是 vue 文件的默认部分。希望这也能帮助其他人。我知道我的问题最终是一个简单的语法问题。

使用 ES5 时如何在 javascript 中渲染 .vue 文件？（尝试使用 webpack 和 vue-loader）

How to render .vue file in javascript when using ES5? (Trying to use webpack and vue-loader)

javascript

webpack

vue.js

vue-loader

vuejs2

使用 ES5 时如何在 javascript 中渲染 .vue 文件？ （尝试使用 webpack 和 vue-loader）

How to render .vue file in javascript when using ES5? (Trying to use webpack and vue-loader)

javascript

webpack

vue.js

vue-loader

vuejs2

使用 ES5 时如何在 javascript 中渲染 .vue 文件？（尝试使用 webpack 和 vue-loader）