一. 初始化项目
- 使用 NPM：
npm create vite@latest
- 使用 Yarn：
yarn create vite
- 使用 PNPM：
pnpm create vite
根据提示进行初始化：（这里我们选用yarn进行创建项目）
进入项目目录：
cd vite-project
下载依赖：
yarn
运行项目：
yarn dev
注意：由于vue2的vscode开发插件并不能很好的满足我们vue3开发，所以我们需要更换开发插件。
- Volar
使用 VSCode 开发 Vue2 时， Vetur 插件作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。
而随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur 插件， 不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。
使用时需要 禁用Vetur
- Vue VSCode Snippets
Vue VSCode Snippets 插件旨在 为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。
此时我们就可以通过关键字快速生成代码片段 vbase :
二. 配置环境
1. 解决ts找不到模块
我们在项目创建好后可能会遇到如下问题：
解决方案：
- 在根目录创建 shims.d.ts文件
//shims.d.ts // 声明模块，处理以 .vue 结尾的文件 declare module "*.vue" { // 导入 vue 模块中的 defineComponent 函数 import { defineComponent } from "vue"; // 定义一个常量 component，类型为 defineComponent 函数的返回类型 const component: ReturnType<typeof defineComponent>; // 导出 component 常量，使其在其他文件中可用 export default component; }
- 修改 tsconfig.json文件
{ // 编译器选项 "compilerOptions": { // 定义类型声明文件的路径 "typeRoots": [ "node_modules/@types", // 默认路径，TypeScript 会在这里查找类型声明 "src/types" // 自定义路径，你可以在这里放置你的类型声明 ], // 设置输出代码的 ECMAScript 目标版本 "target": "esnext", // 使用 defineProperty 定义类的字段 "useDefineForClassFields": true, // 设置输出模块的类型 "module": "esnext", // 使用 Node.js 的模块解析策略 "moduleResolution": "node", //跳过typescript对第三方依赖的类型检查 "skipLibCheck": true, // 开启所有严格类型检查选项 "strict": true, // 保留 JSX，不进行转换 "jsx": "preserve", // 生成源映射，以便在调试时能找到原始 TypeScript 代码 "sourceMap": true, // 允许从 .json 文件中导入数据 "resolveJsonModule": true, // 启用 CommonJS 和 ES6 之间的模块兼容性 "esModuleInterop": true, // 包括 esnext 和 DOM 库的定义 "lib": ["esnext", "dom"], // 设置基础路径，用于解析模块名 "baseUrl": "./", // 路径别名设置 "paths": { "@": ["src"], // '@' 指向 'src' 目录 "@/*": ["src/*"] // '@/xxx' 会解析到 'src/xxx' } }, // 定义哪些文件需要被 TypeScript 编译器处理 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] }
此时重启vscode，错误消失：
2. 环境配置
保证 node 的使用
yarn add @types/node --save-dev
修改 vite.config.ts
// 导入 Vite 的配置方法和 Vue 插件 import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // 导入 Node.js 的 path 模块，用于处理文件路径 import * as path from 'path'; // 使用 defineConfig 方法定义 Vite 的配置 export default defineConfig({ resolve: { // 设置别名，这样在项目中就可以使用 '@' 代替 'src' 路径 alias: { '@': path.resolve(__dirname, 'src') } }, plugins: [ // 使用 Vue 插件，这样 Vite 就能处理 Vue 文件了 vue() ], server: { // 设置开发服务器的端口号为 8080 port: 8080, hmr: { // 设置 HMR（热模块替换）的主机和端口 host: '127.0.0.1', port: 8080 }, // 设置代理，以解决跨域问题 proxy: { // 使用类型断言确保环境变量是一个字符串 // 这样 TypeScript 就不会报错了 [process.env.VITE_APP_BASE_API as string]: { // 设置代理目标为 localhost:3000 target: 'http://localhost:3000', // 允许改变原始主机头为目标 URL changeOrigin: true, // 重写路径：移除路径中的环境变量部分 rewrite: (path) => path.replace(new RegExp('^' + (process.env.VITE_APP_BASE_API as string)), '') } } } });
配置不同环境的接口地址
在实际开发中，由于在开发、测试、生产环境中的接口地址是不一样的，我们不可能每次在打包到不同环境前都手动去更改接口地址，这样过于麻烦并且很容易出现问题导致环境与接口不对应，此时我们就需要配置不同的环境配置文件来区别不同环境的接口地址，方便我们在后续打包时通过一行命令就打包成为我们想要的环境包。
- 根目录创建 .env.development 开发环境 配置文件
- 根目录创建 .env.staging 测试环境 配置文件
- 根目录创建 .env.production 生产环境 配置文件
# 开发环境配置 VITE_ENV = 'development' VITE_APP_BASE_API = '接口地址' # 图片上传 VITE_APP_IMAGE_PATH='图片接口地址'
# 测试环境配置 VITE_ENV = 'staging' VITE_APP_BASE_API = '接口地址' VITE_APP_IMAGE_PATH='图片接口地址'
# 生产环境配置 VITE_ENV = 'production' VITE_APP_BASE_API = '接口地址' VITE_APP_IMAGE_PATH='图片接口地址'
pakeage.json的scripts中配置不同环境的打包命令
- 使用 yarn build 打包
"build": "vue-tsc && vite build", "build:staging": "tsc --noEmit && vite build --mode staging", "build:production": "tsc --noEmit && vite build --mode production",
接下来使用 yarn build:staging打包测试一下，发现报错：
此报错意为 缺失 ‘@babel/types’ 模块，这是一个常见的类型定义文件，被多个库（如 @babel/parser 和 @vue/compiler-core）依赖。可以安装它来解决这个问题：
yarn add @babel/types --dev
接下来还有一个报错：
此报错意为 无法找到 ‘./App.vue’：因为 TypeScript 默认不知道如何处理 .vue 文件。可以在 vite-env.d.ts中添加如下代码：
/// <reference types="vite/client" /> declare module "*.vue" { import { defineComponent } from "vue"; const component: ReturnType<typeof defineComponent>; export default component; }
接下来再使用 yarn build:staging打包测试一下，打包成功：
vite+vue3+ts从0到1搭建企业级项目（2）https://developer.aliyun.com/article/1540138
