Question

我正在尝试在Laravel 5应用程序上使用Vue JS，当我使用 v-

时，它会给我空白页

            new Vue({
                el: '#vApp',
                data: {
                    todos: [
                        { text: 'Learn JavaScript' },
                        { text: 'Learn Vue' },
                        { text: 'Build something awesome' }
                      ],
                      message: "Welcome"
                  },
                delimiters: ["%%","%%"]
            });

如果我只是将消息打印到刀片视图页面中，则效果很好

<div id="vApp">%% message %%</div>

当我尝试使用

 <li v-for="todo in todos">
      %% todo.text %%
 </li>

或

  <input v-model="message">

它给我空白页

Answer 1

NPM软件包导出的默认内部版本是仅运行时内部。它没有模板编译器。因此，您要么需要在javascript中导入vue的完整版本，要么创建一个webpack别名（如果您使用的是webpack）。

使用渲染功能或“单个文件组件”定义模板时，不会发生此问题。

注意：

如果您不希望支持较旧的浏览器并且不使用最新的ES功能，则不需要babel-loader，如果您不使用单个文件组件，则不需要vue-loader。 / p>

还请注意，您必须在HTML <meta charset="utf-8">

中包含meta标签

这可行-

// webpack
module.exports = {
  mode: "production",
  entry: ["./app.js"],
  output: { filename: "./app.min.js" },
  resolve: { alias: { vue: "vue/dist/vue.js" } },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  }
};

// app.js

import Vue from "vue";
// import Vue from 'vue/dist/vue.js';

window.app = new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Build something awesome" }
    ],
    message: "Welcome"
  },
  delimiters: ["%%", "%%"]
});

<!-- index.html -->

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="app">
    <p>%% message %%</p>
    <li v-for="todo in todos">
        %% todo.text %%
    </li>
    <input v-model="message">
</div>
<script src="app.min.js"></script>
</body>
</html>

Answer 2

您是否已通过vApp包装内容？像这样：

<div id="vApp">
    <li v-for="todo in todos">
        %% todo.text %%
    </li>
</div>

Laravel 5和Vue JS空白页

2 个答案: