Vite 基础之 Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置

最新推荐文章于 2025-04-28 10:56:19 发布

城南花开ze

最新推荐文章于 2025-04-28 10:56:19 发布

阅读量5.5k

点赞数 1

分类专栏： Webpack、Vite、Gulp 文章标签： Vite 基础 vite使用ts 处理静态资源的方法集成 eslint env 环境变量的设置

本文链接：https://blog.youkuaiyun.com/weixin_42614080/article/details/124898212

版权

一、Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置

在 vite 中，对于 ts 只编译不校验。如果需要对 ts 校验，只能使用 tsc。通过 tsc --noEmit 命令，对 ts 只校验不把编译文件做输出，如下所示：

通过 yarn add typescript 命令添加 typescript
新增 tsconfig.json，代码如下：

{
   
  "compilerOptions": {
   
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

修改 package.json，将 build 的命令添加 tsc --noEmit，代码如下：

{
   
  "name": "vite-vue3",
  "private": true,
  "version": "0.0.0",
  "scripts": {
   
    "dev": "vite",
    "build": "tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
   
    "vue": "^3.2.25"
  },
  "devDependencies":

最低0.47元/天解锁文章