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

Posted 2023-02-22

【中文标题】如何使用编译器包含的构建（Vue、Typescript、Webpack）

【英文标题】：How to use compiler included build (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 来拆分文件的解决方法，或者是否可以使用包含的编译器构建？

【参考方案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>')
)