Encore+Vue3 SFC+TypeScript中添加lang="ts"后render导出找不到的问题

问题原因 #

在Vue单文件组件中启用lang="ts"时，webpack需要同时处理Vue模板编译与TypeScript代码转译，现有配置缺少二者协同工作的关键设置，导致模板模块无法正确导出render函数。

解决方案 #

1. 安装对应Vue版本的编译依赖 #

• Vue 2项目：安装模板编译工具

  npm install vue-template-compiler --save-dev
  

• Vue 3项目：安装新的编译核心

  npm install @vue/compiler-sfc --save-dev
  

2. 调整Webpack Encore配置，改用内置Vue支持 #

替换手动添加的vue-loader配置，使用Encore内置的Vue启用方法，确保模板与TS代码的协同处理：

const Encore = require('@symfony/webpack-encore')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
const { DefinePlugin } = require('webpack')

Encore
    // ... 保留原有其他配置
    .configureBabel(null, {
        includeNodeModules: ['fetch-inject'],
    })
    // 启用Vue Loader，替代手动添加的vue-loader规则
    .enableVueLoader(() => {}, {
        version: 2, // 根据你的Vue版本填写2或3
        runtimeCompilerBuild: true, // 需要运行时编译模板则开启
    })
    .addPlugin(new DefinePlugin({
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false' // 生产环境建议关闭devtools
    }))
    // 添加TS Loader，处理Vue文件中的TypeScript代码
    .addLoader({
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
            appendTsSuffixTo: [/\.vue$/],
            transpileOnly: true // 可选，加快编译速度，需严格类型检查可关闭
        },
    })

3. 更新tsconfig.json配置 #

确保TypeScript能识别Vue文件并加载Vue类型声明：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    },
    "types": ["vue"], // Vue 2填"vue"，Vue3填"@vue/runtime-dom"
    "allowJs": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.html"], // 确保覆盖所有相关文件
  "exclude": ["node_modules"]
}

4. 规范SFC的TS写法 #

确保组件的script部分符合Vue+TS的语法要求：

• Vue 2选项式API：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      message: 'Hello Vue + TS'
    };
  }
});
</script>

• Vue 3组合式API（<script setup>）：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const message = ref('Hello Vue 3 + TS');
</script>

验证 #

重新启动webpack编译服务，若问题仍存在，可清除缓存后重试：

rm -rf var/cache # Symfony项目缓存目录
npm run encore dev -- --clear-cache

内容的提问来源于stack exchange，提问作者CfC