最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

世界即时：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"    }  ]

关键词： 相关文件 新建项目 绝对路径