Vite学习笔记----踩过的坑（不定时更新）

---

一. import的模块引入失败报404的请求错误

• 【现象】
  本地有个api文件夹内的文件，import到别的地方一直被当做请求，无法作为模块被引入。

• 【定位问题】
  查阅了vite官网，了解到vite的import，类似于http，那么为什么其他模块引入正常，只有这个引入被当做request呢？于是怀疑是请求搞的鬼，查看了请求配置，发现本地server.proxy的代理前缀是api，前后联系一下，发现问题所在，api重名导致import被当做真的请求代理了出去。

• 【解决方案】
  将api文件夹和proxy前缀选其一进行改名，只要保证不重名就可以了

• 【总结】
  vite.config.ts配置的root，其下的文件夹或文件不要跟server.proxy配置的前缀重名，比如当前的是api, 就不要用api命名，会被认为是请求，而非import '@/api/xxx'模块引入

二. 命名规则注意

• 【现象】未使用大驼峰形式命名文件，报错：
  
• 【定位问题】
  组件命名规则注意以PascalCase作为注册格式,参考：组件名格式，为了处理这个报错，目前在.eslintrc.js配置 rules:

"vue/multi-word-component-names": ["error", {
  "ignores": ['index']
}]
1
2
3

注：只配置了index.vue的情况，如果后续有其他文件名称还要再添加进ignores

• 【总结】
  组件尽量用大驼峰形式作为文件名，比如CommonButton/index.vue要写成CommonButton.vue或者CommonButton/CommonButton.vue