vite ts 配置使用@ 允许js

1.vite.config.ts 配置
 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
import setup_extend from 'vite-plugin-vue-setup-extend'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),setup_extend(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},
})

2.tsconfig.json配置

{"compilerOptions": {"allowJs": true,"checkJs": false,"target": "ESNext","useDefineForClassFields": true,"module": "ESNext","moduleResolution": "Node","strict": true,"jsx": "preserve","sourceMap": true,"resolveJsonModule": true,"esModuleInterop": true,"lib": ["ESNext", "DOM"],"skipLibCheck": true,"baseUrl": ".","paths": {"@/*": ["src/*"]}},"include": [],"exclude": ["node_modules"],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }]
}

3.tsconfig.app.json

{"extends": "./tsconfig.json","compilerOptions": {"composite": true,"outDir": "./dist","types": ["vite/client"]},"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","src/**/*.js",],"exclude": ["node_modules"]
}

4.tsconfig.node

{"compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo","target": "ES2022","lib": ["ES2023"],"module": "ESNext","skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"verbatimModuleSyntax": true,"moduleDetection": "force","noEmit": true,/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["vite.config.ts"]
}

5.vite-env.d.ts 解决vue文件引入报错

/// <reference types="vite/client" />
declare module '*.vue' {import type { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}