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

【问题标题】：You are using the runtime-only build of Vue where the template compiler is not available error您正在使用仅运行时构建的 Vue，其中模板编译器不可用错误
【发布时间】：2021-08-29 06:39:34
【问题描述】：

我最近一直在项目中使用 vue，当我尝试编译时，我的 brwoser 页面是白色的，并且错误 您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译成渲染函数，要么使用编译器包含的构建。在浏览器控制台上

我的 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

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

【问题讨论】：

标签： javascript typescript vue.js vuejs2

【解决方案1】：

希望这是一个非常简单的方法 - 您使用的是 vue.runtime.js 而不是常规的 vue.js。

你可以看到explanation of the different builds in the docs。

仅运行时构建有点小，但实际上适用于不同的用例，例如从 Vue CLI 和 npm run（使用 Vue 的一种非常流行的方式）运行时，或者如果您正在调用 html-rendering JavaScript 原生函数（不流行）。

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

【讨论】：