參考：
項目詳細文檔：
稀土挖金：https://juejin.cn/post/7228990409909108793#heading-1
csdn： https://blog.csdn.net/u013737132/article/details/130191394
vite文檔：
https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
gitee項目源碼：
https://gitee.com/youlaiorg/vue3-element-admin

版本信息：
node: v20.18.0
npm: 10.8.2
pnpm: v10.8.0

創建項目

npm init vite@latest power_front --template vue-ts

生成的項目目錄：

package.json文件：

{"name": "power_front","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.13"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","@vue/tsconfig": "^0.7.0","typescript": "~5.7.2","vite": "^6.2.0","vue-tsc": "^2.2.4"}
}

文件創建時tsconfig.json原始內容：

參考配置：
https://blog.csdn.net/qq_45954390/article/details/142780564
https://blog.csdn.net/qq_45954390/article/details/144606262

其他可參考的博客：
https://juejin.cn/post/7418530380194201626
https://www.cnblogs.com/zhouxiaobai/p/17564807.html
https://blog.csdn.net/azl397985856/article/details/108090980
https://blog.csdn.net/s178435865/article/details/131417356
https://blog.csdn.net/2301_79568124/article/details/137783628

{"files": [],//指定待編譯文件"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }]
}references 屬性作用是指定工程引用依賴。
在項目開發中，有時候我們為了方便將前端項目和后端node項目放在同一個目錄下開發，兩個項目依賴同一個配置文件和通用文件，但我們希望前后端項目進行靈活的分別打包，那么我們可以進行如下配置：files 屬性作用是指定需要編譯的單個文件列表。
默認包含當前目錄和子目錄下所有 TypeScript 文件參考：https://blog.csdn.net/azl397985856/article/details/108090980

bug匯總，知識點

src 路徑別名配置和tsconfig.json文件報錯【這個不配置好，會引起其他頁面引用時報錯：見–整合 Pinia】：

配置路徑別名時，引入組件報錯：cannot find module ‘’ or its corresponding type declarations
但可以正常渲染，跟tsconfig.json報錯一塊解決。

tsconfig.json有報錯
問題：按照有來項目的的tsconfig.json配置，tsconfig.json中對tsconfig.app.json和tsconfig.app.json引用有報錯。



解決方法參考：https://blog.csdn.net/qq_40244755/article/details/146768391
在tsconfig.app.json和tsconfig.app.json文件中，分別添加"composite": true并確保沒有設置"noEmit": true：

三個文件的詳細配置如下：

tsconfig.json文件配置

//默認的配置
// {
//   "files": [],//明確列出要編譯的文件
//   "references": [//項目引用，是 TS 3.0 中的一項新功能，它允許將 TS 程序組織成更小的部分。使用小技巧：在填寫路徑時 ** 表示任意目錄， * 表示任意文件。
//     { "path": "./tsconfig.app.json" },
//     { "path": "./tsconfig.node.json" }
//   ],
// }//有來科技和【https://blog.csdn.net/qq_45954390/article/details/144606262】、【https://blog.csdn.net/qq_45954390/article/details/142780564】
{"compilerOptions": {"target": "esnext", // 目標語言的版本"module": "esnext",// 指定生成代碼的模板標準"moduleResolution": "node", // 模塊解析策略，ts默認用node的解析策略，即相對的方式導入"lib": ["esnext", "dom"],// 編譯時引入的 ES 功能庫，包括：es5 、es6、es7、dom 等。// 如果未設置，則默認為： target 為 es5"baseUrl": ".", // 模塊解析根路徑，默認為 tsconfig.json 位于的目錄"paths": {// 路徑映射，相對于baseUrl"@/*": ["src/*"]},// 嚴格性和類型檢查相關配置"strict": true,// 開啟所有嚴格的類型檢查"skipLibCheck": true,// 是否跳過聲明文件的類型檢查，這可以在編譯期間以犧牲類型系統準確性為代價來節省時間，默認：false"forceConsistentCasingInFileNames": true,// 是否區分文件系統大小寫規則// 模塊和兼容性相關配置"allowSyntheticDefaultImports": true,//允許從那些使用 CommonJS（require）導出模塊的庫中導入默認導出（default exports）"esModuleInterop": true,// 允許export=導出，由import from 導入 【解決了在 TypeScript 中使用 CommonJS 模塊和 ECMAScript 模塊相互兼容的一些問題】"resolveJsonModule": true,//是否解析 JSON 模塊// 調試和兼容性相關配置"sourceMap": true,// 生成目標文件的sourceMap文件"useDefineForClassFields": true,// useDefineForClassFields 為 true 時，TypeScript 編譯器會生成符合 ECMAScript 標準的類字段。useDefineForClassFields 有利于我們平滑地升級 TypeScript 。"allowJs": true, // 允許編譯器編譯JS，JSX文件// 類型聲明相關配置// "types": ["node", "vite/client", "element-plus/global"]"types": ["node", "vite/client",],// 加載的聲明文件包// "composite":true,// 是否編譯構建引用項目},// 指定需要被編譯的TypeScript文件和需要被排除的文件// 指定要編譯的文件或目錄"include": ["mock/**/*.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts"],//如果不指定include屬性，?則默認當前目錄下除了exclude之外的所有.ts、?.d.ts、?.tsx文件都會被編譯。?// 指定不需要編譯的文件或目錄"exclude": ["node_modules", "dist"],// "composite":true,// 是否編譯構建引用項目//用于指定項目之間的引用關系，當前項目的 tsconfig.json 文件引用了位于相對路徑 "./tsconfig.node.json" 的另一個 TypeScript 配置文件"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }], 
}

tsconfig.app.json配置：

// {
//   "extends": "@vue/tsconfig/tsconfig.dom.json",
//   "compilerOptions": {
//     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",//     /* Linting */
//     "strict": true,
//     "noUnusedLocals": true,
//     "noUnusedParameters": true,
//     "noFallthroughCasesInSwitch": true,
//     "noUncheckedSideEffectImports": true,//     "noImplicitAny": false,//     "emitDeclarationOnly": true,// 僅生成聲明文件，不編譯輸出如 JS 文件。√
//     "composite": true,  // 與 TypeScript 項目可以進行增量構建有關 √
//     "noEmit": false //是否不生成編譯后的js文件,默認值是false，即生成 【確保沒有 "noEmit": true】 √
//   },
//   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
// }// 按照 https://juejin.cn/post/7418530380194201626 配置的{"extends": "./tsconfig.json", // 繼承主配置文件"compilerOptions": {// "emitDeclarationOnly": true,// 僅生成聲明文件，不編譯輸出如 JS 文件。√"composite": true,  // 與 TypeScript 項目可以進行增量構建有關 √