最近在把将原本使用 Vue CLI 开发的专案转换成使用 Vite 建构毕竟 Vite 真的很快啊过程中，遇到了一些需要特别处理的部分，在此做个纪录
import component 时.vue要写出来
若要在 a.vue 中 import component b在 Vue CLI 中我是这样写的
import Bcomponent from \'@/components/b\'
然而，很快就跳出了错误
[plugin:vite:import-analysis] Failed to resolve import "@/components/b" from "src/views/a.vue". Does the file exist?
要改成
import Bcomponent from \'@/components/b.vue\'
要明确写出 .vue 才能正常运作
Vite 没有预设 ~ 等于 node_modules
Vue CLI 预设将 ~ 作为 node_modules 路径因此，当我们写 ~bootstrap/scss/bootstrap 时就等于 ../node_modules/bootstrap/scss/bootstrap
但在 Vite 中并没有这个预设需要自己设定 alias 或是直接把 node_modules 路径写出来()
环境变数的差异
在 Vue CLI 中我们是这样设定环境变数的
VUE_APP_API=......
然后使用 process.env.VUE_APP_API 来取得值
const api = `${process.env.VUE_APP_API}/login`
在 Vite 中要改成
VITE_API=......
取值是import.meta.env.环境变数名称
const api = `${import.meta.env.VITE_API}/login`
要自己装 sass
Vite中的选项并不会包含sass，因此需要额外npm add -D sass
以上，一点简单的纪录