首页 文章

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

提问于
浏览 次
0

我一直在尝试迁移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

Edit On Request

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"
  }
}
javascript webpack vue.js vuejs2 vue-loader

1 回答

  • 0

    感谢thanksd的评论：

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

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

    回复于

相关问题