初始化项目
快捷指令
# pnpm
pnpm create vite project-name -- --template vue-ts
# npm 6.x
npm init vite@latest project-name --template vue-ts
# npm 7+, 需要额外的双横线:
npm init vite@latest project-name -- --template vue-ts
# yarn
yarn create vite project-name --template vue-ts
集成配置
// 确保node可用
pnpm i @types/node --save-dev
// 修改tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"paths": {
"~/*":["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }],
//关键一步,除了以下两个文件,都引入,使得项目认识*.d.ts文件,从而配合下文讲到的插件实现自动引入
"exclude": ["dist", "node_modules"]
}
// 修改vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
//path模块如果找不到就运行pnpm i @types/node --save-dev,更新一下
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode,process.cwd(), '');
return {
base:env.NODE_ENV === 'development'?'./':env.VITE_APP_ROUTE_PREFIX,
resolve: {
//设置别名
alias: {
'~/':`${path.resolve(__dirname, 'src')}/`
}
},
plugins: [
vue(),
],
server:{
proxy:{
['^' + env.VITE_APP_API_PREFIX]:{
target:env.VITE_APP_SERVER_U