ChatGPT解决这个技术问题 Extra ChatGPT

您正在使用仅运行时构建的 Vue,其中模板编译器不可用

I'm trying to compile my Vue.js app with webpack but I get this warning in the browser.

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

What does this mean? How do I resolve the error?


A
Alex Shesterov

This error pops up if you try to use non-precompiled Vue templates.

To fix this, set the runtimeCompiler option in vue.config.js to true:

module.exports = {
  runtimeCompiler: true
}

Note that this will include additional JavaScript payload into your distribution.

Alternatively, you can use precompiled Vue templates.


C
Code Whisperer

This is because the version of vue without the template compiler (needed) is included by default. To override this default, add this to your webpack.config.js:

// webpack.config.js
{
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
    },
}

Source: https://github.com/vuejs-templates/webpack/issues/215


O
Oussama Makhlouk

I still had an error after setting the runtimeCompiler to true in vue.config.js file.

You can simply edit your src/main.js file

from : import Vue from 'vue'

to : import Vue from 'vue/dist/vue.js';


D
Divs2512

If you compile your app with vue-cli-service add the following code to vue.config.js depending upon compiler:

  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  }

If you compile your app with webpack add the following code to webpack.config.js:


    resolve: {
      alias: {
         vue: 'vue/dist/vue.js'
      }
    }


K
Kairat Koibagarov

Use render function

new Vue({
    el: 'body',
     render: function(createElement) {
        return createElement(hello)
    } });

Yes! This allows for the use of the runtime-only build, which is significantly smaller.
what is hello and how can I have 2 different url paths render 2 different components?
J
JoeGalind

For me, it was a typo (lowercase). I had:

import Vue from "Vue";

instead of

import Vue from "vue";