请求增加Vite+TS项目初始化例子

[QiuChenly]

本地在尝试使用Vue3 Vite+TypeScript时编译出来的js单文件页面空白 样式也无法加载 请求增加新的初始化项目例子。

尝试过程

根据官方Vue3文档
npm create vue@3

• TS
• Pinia
  npm i

修改挂载点

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount(document.body)

将项目打包为一个文件：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  base: loadEnv(mode, process.cwd()).VITE_APP_NAME,
  plugins: [
    vue(),
    cssInjectedByJsPlugin() //css注入进js中
    // legacy({
    //   targets: ['defaults', 'not IE 11']
    // })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    minify: true,
    rollupOptions: {
      input: 'src/main.ts',
      output: {
        format: 'iife', //设置为单个js打包
        dir: '/Users/qiuchenly/Downloads/hello_flutter/js',
        entryFileNames: 'main.js' //重新设置入口文件
      }
    }
  }
}))

npm run dev 在本地5174端口

新建了一个空的Flutter项目引入webf，然后简单初始化一下:

运行后Flutter中报错 解析器不识别TS文件

所以只好直接编译出产物去在App中加载:

"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build --mode=development --watch",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  }

目前好看起来似乎加载完成 但是无法使用HMR实时加载 并且也有部分html标记无法解析

请求增加相关Simple项目供参考，谢谢。
如果支持TS，项目中是否会有d.ts文件做函数提示库呢？

附上我的测试代码:

vue-project.zip

Flutter端就是正常的新建项目设置依赖，没有其他修改。

其他问题

关于CSS中的动画Transition是否无法使用？