vue/ts 新建项目时好用的配置 【vite.config.ts、tsconfig.json、】

创建完项目后的基础配置

用vite创建初始vue项目后，会生成一个默认的vite.config.ts文件
创建完的内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

重点来了 vite.config.ts 建议放的内容（含注释）

import { fileURLToPath, URL } from 'node:url'

// 使用 defineConfig 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// 此处引用了path路径导向
import path from "path"


export default defineConfig({
  // 查看 插件 API 获取 Vite 插件的更多细节 https://www.vitejs.net/guide/api-plugin.html
  plugins: [vue(), vueJsx()],
  // 在生产中服务时的基本路径
  base: './',
  // 配置别名绝对路径  https://webpack.js.org/configuration/resolve/
  resolve: {
    // resolve.alias: 更轻松地为import或require某些模块创建别名
    alias: {
      // '@': fileURLToPath(new URL('./src', import.meta.url)),
      // 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@components": path.resolve(__dirname, "./src/components"),
      "@views": path.resolve(__dirname, "./src/views"),
      "@store": path.resolve(__dirname, "./src/stores"),
    }
  },
  // 与根相关的目录，构建输出将放在其中，如果目录存在，它将在构建之前被删除
  // @default 'dist'
  build: {
    outDir: "dist",
  },
  server: {
    https: false, // 是否开启 https
    open: true, // 是否自动在浏览器中打开
    port: 8001, // 端口号
    host: "0.0.0.0",
    // 跨域代理
    proxy: {
      '/api': {
        target: "http://localhost:3000",  // 后台接口
        changeOrigin: true,
        // secure: false, // 如果是https接口，需要配置这个参数
        // ws: true, //websocket支持
        // 截取api，并用api代替
        // rewrite: (path) => path.replace(/^\/api/, "/api"),
      }
    }

  },

  // 引入第三方的配置
  optimizeDeps: {
    include: [],
  }

})

下面是 tsconfig.json

只有 "compilerOptions" 目录下面的内容

"compilerOptions": {
    "baseUrl": ".",   // 工作根目录
    "paths": {  // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
      "@/*": ["./src/*"],
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@views/*": ["src/views/*"],
      "@store/*": ["src/stores/*"],
    },
    "lib": [// 编译过程中需要引入的库文件的列表
      "es5",
      "es2015",
      "es2016",
      "es2017",
      "es2018",
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue"
    ],
    "exclude": [
      "node_modules",
      "src/assets/json/*.json",
      "src/assets/css/*.scss"
    ],
    "allowUnreachableCode": true, // 不报告执行不到的代码错误。
    "allowUnusedLabels": false,	// 不报告未使用的标签错误
    "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
    "experimentalDecorators": true, // 启用实验性的ES装饰器
    "noImplicitAny": false, // 是否默认禁用 any
    "removeComments": true, // 是否移除注释
    "target": "esnext",// 编译的目标是什么版本的
    "module": "esnext", // "commonjs" 指定生成哪个模块系统代码
    "strict": true,
    "jsx": "preserve",  // 在 .tsx文件里支持JSX
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "suppressImplicitAnyIndexErrors": true,
    "sourceMap": true,  // 是否生成map文件
    "declaration": true, // 是否自动创建类型声明文件
    "declarationDir": "./lib", // 类型声明文件的输出目录
    "allowJs": true, // 允许编译javascript文件。
    //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
    "types": [
      "webpack-env",
      "node"
    ],

  },

  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]

__EOF__

本文作者：派大星⊙∫⊙
本文链接：https://www.cnblogs.com/liusixiang/p/17091509.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！