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

写在前面

写在前面

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

vite 项目 别名 配置

遇到这个问题是因为技术栈用的是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。
以上就是我破坑的步骤，具体还没有发现什么其他的问题

vi t e项目低版本 浏览器 兼容性问题

这个问题也坑了我一早上，因为我用的是vue3，网上大多数都是react的相关问题，完全找不到用vue3和我有相同问题的，没办法，硬着头皮看文档解决，终于找到了解决方法。
先说下问题：我主要的工作业务是公司内部做飞书的网页端职能应用，但飞书内置的浏览器内核版本太低，导致用飞书内置浏览器打开，会出现白屏，引入vconsole 调试了一下，发现一个匪夷所思的问题，提示我有个错误的符号 ‘.’，这种问题是最恶心的，因为没有错误提示行，我根据vue项目的运行文件顺序一层层打印，从html=&g t;main.ts=&g t;App.vue=&g t;r out re.js，最终把问题锁定在了一个执行语句：
XXX?.xxx
该语句是ES6的新语法，一般浏览器都没有问题，但低版本的浏览器无法解析该语句，所以要进行js 转换，一般的vue2项目我们会使用 babel，但vite里不好使用 babel（我不会，不知道怎么引入该插件），所以另辟蹊径，引入另一个插件，esbuild，他可以把指定文件转译成目标文件，如ts->js，话不多说，贴代码。
目标文件是vite.config.ts，首先要引入该文件

import esbuild from 'rollup-plugin-esbuild'

然后在defineCon fig对象内使用插件属性

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