前端周总结

在vue里面引入ts文件报错：

An import path cannot end with a '.ts' extension. Consider importing xx.js' instead.
方法一（最快）
把引入的xx.ts后缀删除
方法二

# 在tsconfig.json中加入以下配置
"baseUrl": ".",
"paths": {
  "@/*": [
    "src/*"
  ]
}

在webpack的配置文件中加入
"includes":"*.ts","*.tsx"

Pinia的坑

pinia不能在初始化之前调用，不然pinia实例化之后会有取不到值的问题，真的坑，也没有报错。需要在实例化后进行调用。

window.postMessage发送对象报错

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': [object Object] could not be cloned.
应该是发送的数据有问题，网上查看对该参数的解释：

尝试用lodash的cloneDeep方法（或者JSON.stringfy）深拷贝该对象再上传，这次能成功了，坑

vue3项目build打包不通过

看了下报错信息，是node_modules里面文件问题。
检查下package.json的build指令是不是vue-tsc --noEmit && vite build
vue-tsc --noEmit：vue 3 的一个类型检测工具，还包括对模板内表达式和组件之间 props 的验证，常用来生成单文件组件的 d.ts 文件。
可以把指令改为： vue-tsc --noEmit --skipLibCheck && vite build；–skipLibCheck 表示在执行 vue-tsc 时忽略 node_moudles 问题
也可以改为vite build来规避报错

playwright本地调试

playwright脚本测试不通过如何调试？可以输入指令npx playwright test help，可以看到有一个npx playwright test --headed，执行，会弹窗浏览器现在操作步骤。也可在代码中加上await page.pause()来实现断点功能。