Vue运行时版本模板编译报错求助：rollup-plugin-vue如何配置？

Hey there! Let's break down your problem step by step and get your Vue code up and running.

That warning is telling you about a key difference between Vue builds:

• The runtime-only build (the default you're using) is smaller because it doesn't include the template compiler. This compiler is what turns your HTML-style template strings into JavaScript "render functions" that Vue uses to update the DOM.
• The compiler-included build (vue/dist/vue.js) has this compiler built in, letting it process template strings directly in the browser.

When the error says "compile", it refers to this process of translating your template markup into the low-level render code Vue understands. Your ES5 syntax is totally fine—this is just a Vue build/configuration issue.

Since you're using rollup-plugin-vue, you need to configure it to pre-compile your templates during the build process. This way, you can keep using the smaller runtime-only build, and the plugin handles turning your templates into render functions ahead of time.

Here's how to update your rollup.config.js:

import vue from 'rollup-plugin-vue';

export default {
  input: 'your-entry-file.js', // Replace with your actual entry file path
  output: {
    file: 'dist/bundle.js',
    format: 'iife' // Adjust format based on your needs (umd, cjs, etc.)
  },
  plugins: [
    vue({
      compileTemplate: true, // Enable template pre-compilation
      version: 2 // Specify Vue version if you're using Vue 2 (omit for Vue 3)
    })
  ]
};

If you want a quick (but less optimal for production) fix without changing Rollup config, you can switch to importing the compiler-included Vue build in your code:

// Replace import Vue from 'vue' with:
import Vue from 'vue/dist/vue.js';

This lets Vue compile templates in the browser, but adds extra weight to your bundle.

Your code has a couple of small issues that'll keep it from working even after fixing the build:

• In your DynamicList component, the "Add" button doesn't have a click handler. Add @click="addNewItem" to it:

  <input type="button" value="Add Item" @click="addNewItem">
  

• When rendering <ListItem>, you're binding title to the parent's title instead of the looped item. Change it to:

  <ListItem v-for="item in items" :key="item" :title="item"></ListItem>
  

• The ListItem component has an unused addNewItem method and missing items/newItem in its data—you can safely remove that method since it's not used there.

var ListItem = Vue.component('ListItem', {
  data: function () {
    return { title: '' }
  },
  template: `
    <div class="list-item">
      {{ title }}
    </div>
  `
});

var DynamicList = Vue.component('DynamicList', {
  data: function () {
    return { title: 'My List', newItem: '', items: [] }
  },
  addNewItem: function() {
    if(this.newItem.trim().length > 0) {
      this.items.push(this.newItem);
      this.newItem = "";
    }
  },
  template: `
    <div class="dynamic-list">
      <h3>{{ title }}</h3>
      <div>
        <input type="text" v-model="newItem">
        <input type="button" value="Add Item" @click="addNewItem">
      </div>
      <ListItem v-for="item in items" :key="item" :title="item"></ListItem>
    </div>
  `
});

new Vue({
  el: "#vue-container",
  render: h => h(DynamicList),
});

内容的提问来源于stack exchange，提问作者shay te