Vite

在项目开发过程中难免会有测试环境，但是测试人员总不能一直盯着前端更新哪些内容吧，而且会有前端构建不成功的情况导致测试环境不是最新的，也会误导测试人员，所以我做了个插件用来显示部署的情况 ​ 开源地址 项目是开源的， 点此进入 快速开始 npm i vite-plugin-deploy-log -D //vite.config.js import { createDeployLogPlugin } from "vite-plugin-deploy-log"; ... export default defineConfig({ plugins: [createDeployLogPlugin()], ... }) //main.js if (import.meta.env.MODE == "staging") { //仅测试环境下显示 import("vite-plugin-deploy-log").then(({ showDeployLog }) => { showDeployLog(); }); } 附加功能 //插件可选参数 interface DeployLogPlugin { /** * 输出的数据文件路径 * @default "deploy.log" */ outputPath?: string; /** * git消息输出条目数量 * @default 10 */ gitMsgCount?: number; } //调用部署日志数据接口 import { getDeployLogData } from "vite-plugin-deploy-log"; getDeployLogData().then(res => console.log(res)); //修改显示配置 showDeployLog({ base: "/admin/", path: "deploy.log", zIndex: 10000, }); 效果演示

今天给旧项目升级时，碰到 Vite2+js+vue2 的项目结构，但是 VSCode 打开后别名路径一直识别不了，打开 WebStorm 也一样识别不了，看来之前升级 vite2 时肯定是没配好，网上查了查，基本都试了一遍，每一个能真正识别出来的，于是自己倒腾出来了。 配置 vite.config.js 这个很简单,官方例子很多 resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname, './src') } ] } 网上的列子 jsconfig.json 先来看看网上例子，都是这样的，但是在我这个项目上是怎样都不生效。 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] } 我例子的 jsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "target": "es2020", "module": "commonjs", "allowSyntheticDefaultImports": true }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] } 成功识别！