如何使用编译器自带的构建工具(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运行的项目中，我没有找到解决问题的方法。

目前我尝试过：

- 在package.json中添加"vue": { "runtimeCompiler": true } - 使用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的情况下拆分文件，或者可以使用包含编译器的构建？

- Martin Paucot

Answer 1

设置选项 runtimeCompiler 对我有用。但是它不是必需的，因为包 vue-template-compiler 默认已包含在内。此代码片段可能会有所帮助，因为它扩展为一个 render() 函数：

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

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

- Matteljay

Answer 2

我在Vue文档中找到了一个部分。在“Runtime-Compiler-vs-Runtime-only”下，他们描述了要添加到相应构建系统的内容。

- Motine