typescript - 如何使用编译器包含构建(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

设置选项 runtimeCompiler 对我有用。但它不是必需的，因为默认包含包 vue-template-compiler。此代码片段可以帮助您扩展为 render() 函数:

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

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