时间戳

首页 > 解决方案 > 您正在使用仅运行时构建的 Vue，其中模板编译器不可用错误

javascript - 您正在使用仅运行时构建的 Vue，其中模板编译器不可用错误

问题描述

我最近一直在一个项目中使用 vue，当我尝试编译我的 brwoser 页面时是白色的，并且错误You are using the runtime-only build of Vue where the template compiler is not available. 要么将模板预编译为渲染函数，要么使用包含编译器的构建。在浏览器控制台上

我的index.html文件中有这个结构

<body id="page">
    <div id="app">
      
      <h1>{{Title}}</h1>

      <input type="text" placeholder="Username" id="input" v-model="username"/>
      
      <div>
        <button id="button" v-on:click="play">Play</button>
      </div>

      <h1>{{Records}}</h1>

      <dl id="list">
        <dt v-for="user of users" id="data">
          {{user.Username}} - {{user.Score}}
        </dt>
      </dl>
    </div>

    <script src="Views/welcomePage.js"></script>
  </body>

这里是我导入 vue 的地方，我的welcomePage.js 文件，我需要准确导入“vue”，因为一旦你在 html 文件中的输入上写入数据，我需要导出用户名变量上的数据所以我不能将导入更改为“vue/dist/vue.js”

window.axios = require('axios');
import Vue from 'vue';

var app = new Vue({
    el: '#app',
    data:{
        Records: 'Records',
        Title: 'Snake',
        users:[],
        username: '',
    },

    mounted: function(){
        axios.get('http://localhost:3000')
            .then(res => this.users = res.data);
    },

    methods:{
        play(){
            console.log(app)
            window.location.href = 'snake.html'
        } 
    }
})

export default app.$data.username

我怎样才能很好地看到我的页面？

标签： javascripttypescriptvue.jsvuejs2

解决方案

希望是一个非常简单的 - 你使用的是一种味道vue.runtime.js而不是常规的vue.js.

您可以在 docs 中查看不同构建的说明。

仅运行时构建有点小，但实际上适用于不同的用例，例如从 Vue CLI 运行和npm run（使用 Vue 的一种非常流行的方式）或者如果您从 JavaScript 本地调用 html 渲染函数（不是受欢迎的）。

您需要“完整”构建或“完整（生产）”构建，每个都内置了模板编译器。它可能是从您的 HTML 页面链接的，因此只需将您的引用更改为适当的 vue.js 文件。

推荐阅读