vite - The alias using the @ prefix in typescript in vue prompts an error (cannot find module...)

question

In Vue.js, it's a common practice to use the "@" symbol as an alias to refer to relative paths in your project. If you use this method in VSCode, but VSCode cannot recognize the alias correctly, it may be caused by your project not configuring the alias correctly.

solve

try 1

To allow VSCode to recognize aliases correctly, you need to add an alias configuration to the jsconfig.json or tsconfig.json file in your project. Here is an example:

{
    
    
  "compilerOptions": {
    
    
    "baseUrl": ".",
    "paths": {
    
    
      "@/*": ["src/*"]
    }
  }
}

This configuration maps the @ symbol to the src directory, you can adjust it according to your project structure and needs.

In addition, if you are using a project created by Vue CLI, it has been configured with aliases by default, and you can view or modify these configurations in the vue.config.js file.

After completing the configuration, VSCode should be able to correctly identify your alias.

try 2

If you are using it Viteas a build tool, you need to configure the alias in your Vite configuration file vite.config.js.

Here is an example vite.config.js file showing how to configure aliases in Vite:

import path from 'path';

export default {
    
    
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, 'src')
    }
  }
};

In this example, we use Node.js' pathmodule to get the project root directory and map the alias @ to the src directory.
Note: use the path module of Node.js to handle the file path, install the command:

npm i --save-dev @types/node

You can also use other path aliases and pattern matching in the alias configuration, for example:

import path from 'path';

export default {
    
    
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@views/*': path.resolve(__dirname, 'src/views/*')
    }
  }
};

In this example, we use two aliases @components and @views/*, where @views/* uses a wildcard to match all file paths starting with src/views/.

After completing the configuration, you can use the @ symbol as an alias to refer to relative paths in your Vue.js project.

try 3

If you use the "Vue Language Features (Volar)" extension in VSCode and configure it as a code formatter, but when trying to format TypeScript files, something like "FormattingExtension 'Vue Language Features (Volar)' is configured as formatter but it cannot format 'TypeScript'-files" error message may be caused by the fact that the extension itself does not support formatting TypeScript files.

To solve this problem, you can try to use other extensions that support TypeScript formatting, such as "Prettier" or "ESLint". Here is an example of how to configure the Prettier extension as a code formatter:

Install the "Prettier" extension. Open the extension panel in VSCode, search for "Prettier" and install it.

Install Prettier dependencies in your project. Go to your project directory in a terminal and execute the following command:

npm install --save-dev prettier

Create a .prettierrc.js configuration file in the project root directory and add the following content:

Copy code
module.exports = {
    
    
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
};

This configuration file defines Prettier's formatting rules.

Search for "Format: Default Formatter" in VSCode's settings and select "Prettier". This will make Prettier the default code formatter.

After completing the above steps, you should be able to use Prettier to format your TypeScript files in VSCode. If you're still having trouble, check that your TypeScript configuration is correct, and try upgrading or changing the version of the "Vue Language Features (Volar)" extension.

如果还是报错尝试4

srcIt is enough to create a shims file in the directory . Most of my components are setup using scripts only.
src/shims-vue.d.ts

declare module '*.vue';