引言

项目中的结构比较固定的，而通常在实际的开发中，会大量的涉及到使用import语法，一般都是会采用@路径别名的方式，去进行定位文件夹，那么在vue3+ts+vite+vscode的环境下如何设置？

vite中路径别名设置

注意配置项下的resolve下的alias就是进行相应的设置。

// vite.config.ts

import type { UserConfig, ConfigEnv } from 'vite';
import { loadEnv } from 'vite';
import path from 'path';
export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd();

  const env = loadEnv(mode, root);

  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
  const viteEnv = wrapperEnv(env);

  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;

  const isBuild = command === 'build';

  return {
    base: VITE_PUBLIC_PATH,
    root,
    resolve: {
      alias: {
        '@': path.join(__dirname, './src'),
        '@components': path.join(__dirname, './src/components'),
        '@utils': path.join(__dirname, './src/utils'),
        '@router': path.join(__dirname, './src/router'),
        '@request': path.join(__dirname, './src/utils/request'),
        '@store': path.join(__dirname, './src/store'),
        '@storage': path.join(__dirname, './src/utils/storage'),
        '@model': path.join(__dirname, './src/utils/model'),
        '@service': path.join(__dirname, './src/api/service'),
        '@handler': path.join(__dirname, './src/api/handler'),
      },
    },

...
}

tsconfig中的配置

进行了vite的配置后，vite是可以进行正确的路径解析，但是进行点击.vue文件跳转时，跳转进入的是vue定义的模块

1.png 2.png

需要在tsconfig下的path配置项中进行处理：

// tsconfig.json
{
  "compilerOptions": {
   ...
    "paths": {
      "@/*": ["src/*"],
      "@model/*": ["src/api/model/*"],
      "@service/*": ["src/api/service/*"],
      "@handler/*": ["src/api/handler/*"],
      "@types/*": ["types/*"],
      "@utils/*": ["src/utils/*"],
      "@router/*": ["src/router/*"],
      "@store/*": ["src/store/*"],
      "@components/*": ["src/components/*"],
      "@request": ["src/utils/request"],
      "@router": ["src/router"],
      "@store": ["src/store"],
      "@storage": ["src/utils/storage"]
    }
  },
  ...
}

带有 /* 这种指的是文件夹 不带的可以直接定位到文件的，比如 @router router不是文件，但是它下面有index.ts，因此跳转的是router/index.ts。

配置完成后，就可以成功实现跳转：

3.png