{"id":26790077,"url":"https://github.com/lengxien/vite-in-webpack-ts","last_synced_at":"2026-01-07T21:46:15.314Z","repository":{"id":188439590,"uuid":"584644260","full_name":"LenGxien/vite-in-webpack-ts","owner":"LenGxien","description":"vue-cli5.x uses vite in development environment ","archived":false,"fork":false,"pushed_at":"2023-02-17T06:57:28.000Z","size":358,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T14:17:38.802Z","etag":null,"topics":["vite","vite-plugin","viteinwebpack","vue3-typescript","webpack-dev-server","webpack5"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LenGxien.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-01-03T06:21:26.000Z","updated_at":"2024-09-14T09:53:33.000Z","dependencies_parsed_at":"2023-08-15T10:54:55.857Z","dependency_job_id":null,"html_url":"https://github.com/LenGxien/vite-in-webpack-ts","commit_stats":null,"previous_names":["guixianleng/vite-in-webpack-ts","lengxien/vite-in-webpack-ts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenGxien%2Fvite-in-webpack-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenGxien%2Fvite-in-webpack-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenGxien%2Fvite-in-webpack-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenGxien%2Fvite-in-webpack-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LenGxien","download_url":"https://codeload.github.com/LenGxien/vite-in-webpack-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246193254,"owners_count":20738452,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vite","vite-plugin","viteinwebpack","vue3-typescript","webpack-dev-server","webpack5"],"created_at":"2025-03-29T14:17:41.815Z","updated_at":"2026-01-07T21:46:15.280Z","avatar_url":"https://github.com/LenGxien.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite in webpack\n\n由于项目功能比较多，现有的vite插件不具备兼容所有的vue3项目，故将Vite 作为webpack（vue-cli）开发环境运行构建， 为稳定生产环境上项目运行，依然使用webpack进行打包构建。\n这里使用 `pnpm` 进行 `vue-cli` 项目的搭建，请先全局安装 `pnpm`\n\n# 基础项目搭建 Vite + Webpack + Ts\n\n这里我们选择用`Vue-cli`来创建基础 Vue3 项目然后添加 Vite 的支持，不选择`Vite`来创建基础项目的原因是加 Vite 比加 Webpack 要容易一些，前人已经留下了许多经验。\n\n这里为了 Webpack 的支持，主要用到的vite插件有 `Vite` `@vitejs/plugin-vue` `vite-plugin-html-template` `vite-plugin-environment`。\n\n## Vue-cli 创建 Vue3 项目\n\n## ⚡️ 增加 Vite 支持，使用 Vite 开发\n\nVite 的爽点这里就不说了，嘿嘿嘿嘿 ⚡️⚡️⚡️。\n\n要添加 Vite 的支持我们首先需要安装`Vite`与`@vitejs/plugin-vue`：\n\n```\npnpm add -D vite @vitejs/plugin-vue\n```\n\n我们在根目录下创建 `vite.config.js`，写入基础的配置：\n\n```ts\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      \"@\": \"/src\",\n    },\n  },\n  plugins: [vue()],\n});\n```\n\n这里我们添加了基础的 alias 以及 Vite 需要的配置，当然现在配置还不够，无法顺利跑起来。\n\n配置 alias 的话对应的 `tsconfig.json` 中也需要添加 path:\n\n```json\n{\n  \"paths\": {\n    \"@/*\": [\"src/*\"],\n  }\n}\n```\n\n更多关于`@vitejs/plugin-vue`的配置信息：https://www.npmjs.com/package/@vitejs/plugin-vue\n\n## 🛠️ vite-plugin-html-template\n\n由于我们需要同时支持 Webpack 和 Vite，在处理我们最终输出的 html 的时候(SPA 应用总会有一个出口 html)我们需要让 Vite 与 Webpack 保持一致，做代码上的兼容，这个插件帮我们完成了这件事情。\n\n`yarn add vite-plugin-html-template`\n\n```ts\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport htmlTemplate from \"vite-plugin-html-template\";\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      \"@\": \"/src\",\n    },\n  },\n  plugins: [vue(), htmlTemplate()],\n});\n```\n\n单页面应用的话不需要额外配置，如果你想搞一个多页面应用，可以看一下它的配置信息：\n\nhttps://www.npmjs.com/package/vite-plugin-html-template\n\n## 🔩 vite-plugin-environment\n\n在某一次 Vite 的迭代中环境变量`process`变成了`import.meta`但 Webpack 上还是用的`process`，与 html 一样我们需要做一个兼容，让 Webpack 和 Vite 都可以运行，这个插件可以帮我们做这件事情：\n\n`yarn add vite-plugin-environment`\n\n```ts\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport htmlTemplate from \"vite-plugin-html-template\";\nimport EnvironmentPlugin from \"vite-plugin-environment\";\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      \"@\": \"/src\",\n      store: \"/src/store\",\n    },\n  },\n  plugins: [\n    vue(),\n    htmlTemplate(),\n    EnvironmentPlugin(\"all\", { prefix: \"VUE_APP_\" }),\n  ],\n});\n```\n\n创建环境变量的写法与之前一致，all 与 prefix 搭配使用，可以加载全部是这个前缀的环境变量。\n\n```\nWARNING\n\n如果没有写任何环境变量文件的话插件还是不会生成process变量，至少需要存在一个.env文件和一个环境变量。\n```\n\n如果不想增加额外的插件也有直接写的方式：\n\n```ts\nimport { defineConfig } from \"vite\";\n// ...\nexport default defineConfig({\n  // ...\n  define: {\n    \"process.env\": {\n      VUE_APP_API_URL: \"https://www.baidu.com\",\n    },\n  },\n});\n```\n\n更多关于环境变量的讨论可以看这个 Issue:\n\nhttps://github.com/vitejs/vite/issues/1973\n\n添加完这个插件我们就可以跑起 Hello World 啦：\n\n可以直接`yarn vite`，当然比较正经的做法是在`package.json`里添加：\n\n```json\n{\n  \"scripts\": {\n    \"dev\": \"vite --mode dev\"\n  }\n}\n```\n\n# 📦 其他有用的基础配置\n\n## babel 的一些有用的配置\n\n`可选链操作符(?.)`和`空值合并运算符(??)`在写业务时非常香，由于开发时我们用的 `Vite` + `Ts`，而默认的 `Ts` 编译为 `esnext` 天生就支持了这两个运算符，不会编译到更低版本（当然如果你遇到的棘手的兼容性 BUG 就需要编译至更低版本了，祝你好运）。\n\n这里我们可以给 `babel` 添加这些配置来让 `Webpack` 的打包生效：\n\n`yarn add @babel/plugin-proposal-optional-chaining`\n\n`yarn add @babel/plugin-proposal-nullish-coalescing-operator`\n\n在`babel.config.js`中：\n\n```json\n{\n  \"plugins\": [\n    \"@babel/plugin-proposal-optional-chaining\",\n    \"@babel/plugin-proposal-nullish-coalescing-operator\"\n  ]\n}\n```\n\n## 可能想忽略的 ts 错误\n\n在 git hooks 一节里我们并没有配置提交时的 `Ts` 的检查，`Ts` 的检查没法像 `eslint` 检查一样只对做出修改的文件生效，如果每次提交前都做 `Ts` 的全量检查会花很多时间，所以我们把 `Ts` 的检查放在了打包处(这里 Vue-cli 开箱即用，不需要配置)。\n\n`Ts` 全量检查可以为我们发现很多业务中 breaking change 的类型错误(API 类型更改，组件 props 更改等等)，但有时也会有一些没有来得及更新的第三方库的 type 本身无法通过检查(说的就是你七牛桑)，这里我们可以通过配置`fork-ts-checker`来跳过一些目录/文件的 `Ts` 检查，这是一个仅 Webpack 的配置：\n\nvue.config.js:\n\n```js\n\n  chainWebpack: config =\u003e {\n    config.plugins.get(\"fork-ts-checker\").tap(options =\u003e {\n      options[0].issue = {};\n      options[0].issue.exclude = [{ file: \"node_modules/*\" }];\n      return options;\n    });\n  },\n```\n\n## Install and use\n\n- Get the project code\n\n```bash\ngit clone https://github.com/guixianleng/vite-in-webpack-ts.git\n```\n\n- Installation dependencies\n\n```bash\ncd vite-in-webpack-ts\n\npnpm install\n\n```\n\n- run\n\n```bash\npnpm serve or pnpm dev\n```\n\n- build\n\n```bash\npnpm build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flengxien%2Fvite-in-webpack-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flengxien%2Fvite-in-webpack-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flengxien%2Fvite-in-webpack-ts/lists"}