Question

我无法构建类似于vue.js示例路由器应用程序（https://github.com/chrisvfritz/vue-2.0-simple-routing-example）的东西。

为了让它发挥作用，我删除了所有花哨的东西。但我仍然在页面加载上有臭名昭着的错误消息：

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

found in

---> <Anonymous>
       <Root>

我没有做任何想象，只是试图动态加载页面：

// file: app/index.js
import Vue from 'vue';

const app = new Vue({
  el: "#app",
  data: {
  },
  computed: {
    ViewComponent() {
      const matchingView = 'Home';

      return require('./pages/' + matchingView + '.vue');
    },
  },
  render(h) {
    return h(this.ViewComponent);
  },
});

页面只是一个静态模板：

// file app/pages/Home.vue
<template>
  <p>Home Page</p>
</template>

<script>
  export default {
  };
</script>

我不明白的是，如果我静态导入我的页面，我可以使我的页面工作：

// file app/index.js
import HomePage from './pages/Home.vue';

const app = new Vue({
  // ...
  computed: {
    ViewComponent() {
      return HomePage;
    }
  }
});

我怀疑我没有正确配置我的webpack构建，但是无法找到这里发生的事情......我已经按照文档中的说明安装了vue-loader和vue-template-compiler，但它确实没有改变什么。

以下是我的依赖项：

  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "vue-loader": "^13.0.3",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "vue": "^2.4.2"
  }

webpack.config.json文件

var path = require('path');


module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
        },
      },
      {
        test: /\.test$/,
        exclude: '/node_modules/',
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
  },
};

Answer 1

我知道这并没有直接回答你的问题，但如果你只是想尝试vue使用vue-cli制作一个简单的应用程序。
https://vuejs.org/v2/guide/installation.html#CLI
https://vuejs-templates.github.io/webpack/
这是开始使用vue的最简单方法。

Vue.JS无法动态加载模板

1 个答案: