【20.2】vue3学习 短路径@配置

vue3 +ts+vite
由于系统页面变多，总是要写'../../' 这种相对路径或者'src/components/xxx' 这种东西，和vue2的习惯，十分难受的感觉，
现在学习下修改vite和ts使支持‘@’这种短路径替代‘src’， 下面是详细配置

1. 配置vite.config.ts 在 defineConfig中添加 resolve.alias
   这一步修改让vite进行build的时候可以知道路径查找

  // 别名配置
  resolve: {
    alias: {
      // 键必须以斜线开始和结束
      '@': path.resolve(__dirname, './src'),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@common": path.resolve(__dirname, "./src/common"),
      "@interface": path.resolve(__dirname, "./src/interface"),
      "@plugins": path.resolve(__dirname, "./src/plugins"),
      "@utils": path.resolve(__dirname, "./src/utils"),
      "@components": path.resolve(__dirname, "./src/components"),
      "@styles": path.resolve(__dirname, "./src/styles"),
      "@store": path.resolve(__dirname, "./src/store"),
      "@views": path.resolve(__dirname, "./src/views"),
    },
  },

image.png

2 修改tsconfig.json 中添加 paths
这一步修改让ts语法验证不会报错，

    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@components/*": ["./src/components/*"],
      "@interface/*": ["src/interface/*"],   
      "@plugins/*": ["src/plugins/*"],   
      "@common/*": ["src/common/*"],   
      "@utils/*": ["src/utils/*"],   
      "@styles/*": ["src/styles/*"],   
      "@store/*": ["src/store/*"],   
      "@views/*": ["./src/views/*"],     
    }

image.png

需要注意的是ts和vite中的配置的要一致，对应的key不要一个写‘@interface’ 另一个写‘@/interface’ 这样的话还是有问题的，一定要一样。