Как использовать компилятор с включенной сборкой (Vue, Typescript, Webpack)

Question

Я получаю сообщение об ошибке:

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.

В моем проекте, работающем с Vue, Typescript & Webpack, и я не нашел никакого решения, чтобы решить проблему. Что я пробовал до сих пор:

• Добавление "vue": { "runtimeCompiler": true } в package.json
• Использование new Vue({render: h => h(MyComponent)}).$mount() (уже используется)

Код ( только важные части):

# webpack.config.js

module.exports = {
  target: 'node', // To use Node API trough electron
  entry: 'app/index.ts',
  output: { path: '/dist', filename: 'frontend.js' },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: /app/,
        options: { appendTsSuffixTo: ['/\.vue$/'] }
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
  externals: [nodeExternals()]
}

# app/index.ts

new Vue({render: h => h(AppComponent)}).$mount('#app')

# app/components/app.component.ts
@Component({ template: require('./app.component.html') }
export default class AppComponent extends Vue {}

Как видите, я не использую .vue, и ошибка вызывается с помощью @Component({ template: require('./app.component.html') }.

Есть ли обходной путь для разделения файлов без использования template или возможно использовать компилятор, включенный в сборку?

Answer 1

Я нашел раздел в vue документации . В разделе «Runtime-Compiler-vs-Runtime-only» они описывают, что добавить для соответствующих систем сборки.

Answer 2

Настройка опции runtimeCompiler у меня сработала. Но это не обязательно, так как пакет vue-template-compiler включен по умолчанию. Этот фрагмент кода может помочь вам при расширении до функции render():

import { compileToFunctions } from 'vue-template-compiler'

component: Vue.component("Hola", {
  ...compileToFunctions('<div>Hello user number {{ 1 + 1 }}</div>')
})