Question

我一直在尝试迁移vue项目，遗憾的是我无法在构建应用程序的地方使用导入/导出。因此，为了简化我的问题，我从零开始创建了一个项目来构建一个没有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'
          }
        ]
      }
};

我从npm运行webpack-dev-server --config ./webpack.config.js以运行webpack服务器。我也做了webpack --config ./webpack.config.js，但后来我必须在chrome中运行index.html，我认为运行服务器可能实际上更适合捆绑。

我知道很多人都有类似的问题，但由于某种原因，我发现没有一个解决方案适合我。我真的很感谢能帮助我解决这个问题。

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

按要求修改

dev-Dependencies和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

感谢感谢的评论：

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）

1 个答案:

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

1 个答案:

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