迁移至Vite后Vue2模板不渲染问题求助

将Vue2项目从Webpack迁移至Vite，沿用原有多页面构建模式，但构建完成后，带ID的目标div内容为空，模板无法渲染。不过beforeMount等视图生命周期方法能正常执行，控制台可以打印日志，有没有人遇到过类似问题？

我的Vite配置： #

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import { fileURLToPath, URL } from 'node:url';
import { globSync } from 'glob';
import path from 'path';

const publicDir = 'static_mpa';
const filesForBuild = Object.fromEntries(
    globSync(`${publicDir}/**/{index.vue,*js}`).map(file => {
        return [
            path.relative(
                publicDir,
                file.slice(0, file.length - path.extname(file).length)
            ).replace('/index', ''),
            fileURLToPath(new URL(file, import.meta.url))
        ]
    })
);

export default defineConfig({
    plugins: [
        vue(),
    ],
    publicDir: `/${publicDir}/`,
    base: '/',
    server: {
        hmr: {
            host: 'localhost'
        }
    },
    resolve: {
        extensions: ['.css', '.js', '.vue', '.ts'],
        alias: {
            // '@': fileURLToPath(new URL(`./${publicDir}`, import.meta.url))
        }
    },
    build: {
        minify: 'terser',
        outDir: 'static/frontend/',
        assetsDir: './',
        rollupOptions: {
            input: filesForBuild,
            output: {
                format: 'es',
                entryFileNames: '[name].js',
            }
        }
    },
});

可能的解决方向： #

• 确认挂载时机：如果入口脚本在DOM加载前执行，会导致找不到目标div。把Vue实例挂载代码放到DOMContentLoaded事件回调中：

  document.addEventListener('DOMContentLoaded', () => {
    new Vue({
      el: '#app',
      render: h => h(App)
    })
  })
  

• 修正publicDir配置：Vite的publicDir应该用相对路径，当前配置的/${publicDir}/是绝对路径，可能导致静态资源或模板加载异常，改成publicDir: publicDir即可。
• 调整Rollup输出格式：当前设置format: 'es'，如果HTML中的脚本标签没有加type="module"，浏览器无法正确解析ES模块。要么给script标签加上type="module"，要么把output格式改为'iife'。
• 检查模板编译结果：查看构建后的JS文件，确认组件的render函数是否正常生成。如果编译失败，可能是@vitejs/plugin-vue2版本不兼容，尝试升级或降级插件版本。

内容的提问来源于stack exchange，提问作者Булат Шарафутдинов