Prologue, version

"@types/node": "^ 16.9.1." "
"vite": "^ 2.5.4." "
"@vitejs/plugin-vue": "^ 1.6.1." "
"@vue/compiler-sfc": "^ 3.2.6"
"vue-tsc": "^ 0.2.2"
"typescript": "^ 4.3.2." "
Copy the code

As long as it is implemented and no errors are reported, it doesn’t matter if the version is different

1. Install dependencies

npm i @types/node -D
Copy the code

Second, modify,vite.config.js

import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig {
    // ...
    resolve: {
        alias: {
            "@": resolve(__dirname, 'src'), // Path alias
        },
        extensions: ['.js'.'.json'.'.ts'] // You can add or subtract the suffix you want to omit when using the path alias
    }
    // ...
}
Copy the code

It is not recommended to ignore. Vue files in the vite official documentation, so you need to add.vue cn.vitejs.dev/config/#res…

Cases of import HelloWorld from ‘@ / components/HelloWorld. Vue’

Three, modify,tsconfig.json

{
    "compilerOptions" : {
        // ...
        "baseUrl": ".".// Set the base directory for resolving non-relative module names. Relative modules are not affected by baseUrl
        "path": { // Used to set the module name to baseUrl based path mapping
            "@ / *": ["src/*"]}// ...}}Copy the code