如何使用编译器包含的构建（Vue、Typescript、Webpack）答案

【问题标题】：How to use compiler included build (Vue, Typescript, Webpack)如何使用编译器包含的构建（Vue、Typescript、Webpack）
【发布时间】：2020-05-05 19:03:49
【问题描述】：

我收到了错误：

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 来拆分文件的解决方法，或者是否可以使用包含的编译器构建？

【问题讨论】：

标签： typescript vue.js webpack vuejs2

【解决方案1】：

我在vue documentation 中找到了一个部分。在“Runtime-Compiler-vs-Runtime-only”下，它们描述了为各自的构建系统添加的内容。

【讨论】：

【解决方案2】：

设置选项runtimeCompiler 对我有用。但它不是必需的，因为默认情况下包含包vue-template-compiler。这段代码 sn-p 可能会对您有所帮助，因为它会扩展为 render() 函数：

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

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

【讨论】：