本篇文章主要目的是将vite+vue3+vue-router+ts+pinia+element-plus结合搭建一个基本项目框架，用于快速搭建项目，不会具体介绍每个库或者api调用方式，需要详细了解可以去官网
vite创建项目
编辑器如果使用的vscode 将vetur升级为volar 否则项目可以启动成功但是代码会有很多报错
yarn create vite
1.选择vue
2.选择vue-ts
3.安装依赖 yarn
执行 yarn dev 打开浏览器出现如下则说明项目启动成功
基础配置
针对我们使用vuecli 脚手架创建项目的习惯，我会把注意点在下面列出来
- 配置别名:我们习惯使用“@”代替src目录，在vite中直接使用“@”会报错，因为vite没有内置，需要我们手动添加，path 直接使用会提示找到不到模块，安装@types/node 即可
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})
配置完别名我们就可以在代码中使用“@”替代src目录，当然也可以配置多个别名。这样配置完后有一个问题就是代码不报错了，但是也没有提示了，输入@后没有提示，只能手动输入路径，这样可太不智能了
其实这个时候就是ts配置文件的问题，因为ts不知道“@”代表啥路径，所以在tsconfig.json中配置，
然后在输入“@”后就会智能提示路径了
好了，现在可以愉快的进行vue3+ts开发了，但是我们在开发过程中会发现一个问题，如果要使用vue3的api
必须要引入，vue2则不用，那么如何解决这个问题呢？
当然是插件啦！unplugin-auto-import
在vite.config.ts中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'], // 需要自动引入api的库
dts: resolve(__dirname, 'src/auto-import.d.ts') //可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts' ,注意:这里配置之后会在启动之后多次编译，具体原因无法找到，可以选择注释掉，不影响使用
})
],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})
然后在代码中就可以随意使用vue3的api而不用每次都导入了
好了,现在可以愉快的进行开发了，我们搭建完后一定要运行build执行打包看一下，要不然等项目开发完了在打包如果出现问题，那就不好排查了，果然现在打包会有错误！！！
yarn run v1.22.10
$ vue-tsc --noEmit && vite build
node_modules/@vue/reactivity/dist/reactivity.d.ts:26:15 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
26 readonly [ReactiveFlags.IS_READONLY]: boolean;
~~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1208:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1208 [BooleanFlags.shouldCast]?: boolean;
~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1209:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1209 [BooleanFlags.shouldCastTrue]?: boolean;
~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1400:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1400 export { ReactiveFlags }
~~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1753:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1753 export { TrackOpTypes }
~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1782:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1782 export { TriggerOpTypes }
~~~~~~~~~~~~~~
Found 6 errors in 2 files.
Errors Files
1 node_modules/@vue/reactivity/dist/reactivity.d.ts:26
5 node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1208
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
这个就很烦！！！
找到vite官网，官网给出了解释，所以我们把isolatedModules 设置为false，好了，可以打包了 ---- 或者在build脚本里面注释掉vue-tsc --noEmit
打包后我们肯定要预览一下打包后的项目是否正常，我们打开index.html期待出现页面，结果是空白 ！！！是不是很郁闷
其实这是vite打包的路径问题，我们打开控制台查看，index.html可以正常请求，但是js和css请求404，看一下请求URL明显是路径问题
vite.config.ts配置base就可以解决问题了
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
base:'./',
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'], // 需要自动引入api的库
dts: resolve(__dirname, 'src/auto-import.d.ts') //可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
})
],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})