一些工作中遇到的坑系列（vite）

该系列主要用于记录工作中一些bug和一些不太好解决的问题，或者说是自己觉得很有记录必要的东西，所以学习，记录为主，样式美观为辅，基本不会做什么 markdown的格式，方便查阅即可。

遇到这个问题是因为技术栈用的是vi t e+vue3+ts，在项目中肯定需要用到 ts的interface来约束对象的类型，初次发现该应用是在网上随便找了一个配置别名的方法，结果导致了使用别名，或者不使用别名，ts虽然可以找到通过别名找到该文件，但是无法解析 interface，使interface 无效！虽然不知道最初在网上找的那个配置错在哪里，这里通过正确的配置，又重启了vscode，终于成功了！
出现该问题有两个明显的特征：
1.如果配置了别名，则无法通过 control+鼠标点击快捷进入该文件。
2.引入 interface后，基本是无效，无法对参数进行约束，当把鼠标hover到别名上时，无法展示定义的类型约束。

正确的别名配置方法：
1.在vi t e.config.ts 文件中的defineCon fi g 添加属性：

  resolve: {
    alias: {
      // 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev
      "@": path.resolve(__dirname, "src"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "@components": path.resolve(__dirname, "src/components"),
      "@images": path.resolve(__dirname, "src/assets/images"),
      "@views": path.resolve(__dirname, "src/views"),
      "@store": path.resolve(__dirname, "src/store"),
    },
  },

2.如果此时还是出现上述的问题的话，还需要在tsconfig.json中的compilerOp t ion s 属性做如下配置：

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

3.此时如果还不可以的话，希望你可以重启一下vscode。
以上就是我破坑的步骤，具体还没有发现什么其他的问题

import esbuild from 'rollup-plugin-esbuild'

//其中vue()是vite脚手架帮我们自动生成的，我们只需要添加一个属性就可以了
  plugins: [vue(),
  {
    ...esbuild({
      //替换成你想要的谷歌内核版本
      target: 'chrome64',
      loaders: {
        '.vue': 'js',
        '.ts': 'js'
      }
    }),
    enforce: 'post',
  }
  ],