踩坑记14 vs code 快捷键 | vue3 vite2 alias 别名设置

2021.8.11

坑46（ vue3、组件命名 ）：目标是将多组件组成的主页面集中到一个文件夹内，例如pages/home文件夹，其中放置主要引用文件index.vue和其他组件比如UserOperate.vue等，此时，index.vue中导出的name应该依然试用'Home'。

// 例一 pages/home/index.vue
<script>
export defalut {
    name:'Home'
}
</script>

// 例二 pages/login/index.vue
<script>
export defalut {
    name:'Login'
}
</script>

坑47（ vs code、快捷键、新建文件、新建文件夹 ）：目标是设置方便的新建文件及文件夹的快捷键。方法：设置=>键盘快捷方式=>搜索：新建，可以看到'文件：新建文件'、'文件、新建文件夹'这两项，设置便于操作的快捷键即可。因为常用的ctrl+字母键几乎都已被占用，所以此处设置了连按模式：ctrl+Q ctrl+Q => 文件：新建文件；ctrl+W ctrl+W => 文件：新建文件夹。

坑48（ js、数组、判断是否为空 ）：目标是判断一个树中的子树是否为空，子树是数组的格式，判断方法：

if(!tree.children || !tree.children.length)为true，则子树不存在或为空数组。

if(tree.children && tree.children.length )为true，则 不为空的 子树存在。

坑49（ vite2、alias、路径别名 ）：目标是设置根目录的别名。在vite.config.js中配置即可。测试了很多组合，@与src的组合，配合@/调用可行。相关代码如下（展示的是成功的情况，踩坑、报错的错误组合见最下方）：

// vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path' //path是默认有的，不需要自己写
...

export default defineConfig({
  ...
  resolve:{
    alias:[
      {
        find:'@',
        //此处填'/src'也可以
        replacement:resolve(__dirname,'src') 
      }
    ]
  }
})

// router.js中调用
...
// 注意！无论上方是'src'还是'src/'，调用时的'/'不能省略，否则会报错[vite] Internal server error: Failed to resolve import "@views/system/user/index.vue" from "src\router\index.js". Does the file exist?
component:()=>import('@/views/system/user/index.vue'),
...

注意！ 踩坑、报错在这里。以下为错误组合：

// 错误组合1
{ find:'@/', replacement:resolve(__dirname,'src/') }
// 调用1 component:()=>import('@/views/system/user/index.vue'),
// 报错1 error: Could not resolve "@/views/system/user/index.vue"
// 调用2 component:()=>import('@views/system/user/index.vue'),
// 报错2 [vite] Internal server error: Failed to resolve import "@views/system/user/index.vue" from "src\router\index.js". Does the file exist?

//错误组合2
{ find:'@/', replacement:resolve(__dirname,'src') }
// 调用1 component:()=>import('@/views/system/user/index.vue'),
// 报错1 error: Could not resolve "@/views/system/user/index.vue"
// 调用2 component:()=>import('@views/system/user/index.vue'),
// 报错2 error: Could not resolve "@views/system/user/index.vue"
// 错误组合的成功调用方式：component:()=>import('@//views/system/user/index.vue'),

相关原因：vite 2.x中的 alias 会被传递给 @rollup/plugin-alias 并不再需要开始/结尾处的斜线了。相关文档： 从 v1 迁移 | Vite 官方中文文档 (vitejs.dev)

by 莫得感情踩坑机(限定)