vite 构建 vue3 + ts 项目

亦非余

已于 2023-08-25 17:53:39 修改

阅读量456

点赞数 1

文章标签： vue.js 前端 typescript

于 2023-06-14 10:55:53 首次发布

本文链接：https://blog.csdn.net/weixin_44536001/article/details/131202498

版权

1.构建vite项目

npm create vite@latest

2.根据提示配置项目信息

Ok to proceed? (y) y
√ Project name: ... test
√ Package name: ... test
√ Select a framework: » Vue
√ Select a variant: » TypeScript

3.进入项目目录安装依赖包

cd test 
npm install

4. 安装@types/node

npm add -D @types/node

5.配置tsconfig.json 和 tsconfig.node.json中moduleResolution 属性为node模式，删除 tsconfig.json "allowImportingTsExtensions": true, 不然Visual Studio对于一些引入编译器会报错

6.配置 tsconfig.json，和vite.config.ts中别名相关配置信息

//tsconfing.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"],
      "components":["src/components/*"],
      "_pinia/*":["src/pinia/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

//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: [
      {
        find: '@',                                   // 别名
        replacement: resolve(__dirname, 'src'),      // 别名对应地址
      },
      {
        find: 'components',
        replacement: resolve(__dirname, 'src/components'),
      }
    ]
  },
})

7.安装引入自身项目所需依赖如vue-router、piana、element-plus等

8.启动项目 npm run dev