{"id":13417521,"url":"https://github.com/originjs/webpack-to-vite","last_synced_at":"2025-08-08T23:10:06.079Z","repository":{"id":37101170,"uuid":"360018415","full_name":"originjs/webpack-to-vite","owner":"originjs","description":"Convert a webpack/vue-cli project to vite project. 将 webpack/vue-cli 项目转换为 vite 项目。","archived":false,"fork":false,"pushed_at":"2022-08-09T08:03:46.000Z","size":722,"stargazers_count":742,"open_issues_count":9,"forks_count":43,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-02T06:38:12.722Z","etag":null,"topics":["vite","vue-cli","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/originjs.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-21T03:15:06.000Z","updated_at":"2025-03-20T08:20:33.000Z","dependencies_parsed_at":"2022-07-08T16:47:34.506Z","dependency_job_id":null,"html_url":"https://github.com/originjs/webpack-to-vite","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/originjs%2Fwebpack-to-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/originjs%2Fwebpack-to-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/originjs%2Fwebpack-to-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/originjs%2Fwebpack-to-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/originjs","download_url":"https://codeload.github.com/originjs/webpack-to-vite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247974720,"owners_count":21026742,"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","vue-cli","webpack"],"created_at":"2024-07-30T22:00:39.118Z","updated_at":"2025-04-09T04:02:20.067Z","avatar_url":"https://github.com/originjs.png","language":"TypeScript","funding_links":[],"categories":["Migrations","TypeScript"],"sub_categories":["Vue CLI"],"readme":"[English](./README.md) | 简体中文\n\n[![Test](https://github.com/originjs/webpack-to-vite/actions/workflows/test.yml/badge.svg)](https://github.com/originjs/webpack-to-vite/actions/workflows/test.yml/) [\u003cimg src=\"https://img.shields.io/npm/v/@originjs/webpack-to-vite\" alt=\"npm\" /\u003e](https://www.npmjs.com/package/@originjs/webpack-to-vite)\n\n# Webpack to Vite\n将 webpack 项目转换为 vite 项目。\u003cbr/\u003e\nwebpack-to-vite 已被官方收录，[详情](https://github.com/vitejs/awesome-vite#migrations)\n\n## 快速开始\n\n直接通过 npx 使用:\n```\n$ npx @originjs/webpack-to-vite \u003cproject path\u003e\n```\n...或者全局安装使用:\n```\n$ npm install @originjs/webpack-to-vite -g\n$ webpack-to-vite \u003cproject path\u003e\n```\n\n在新目录 `filename-toVite` 下查看和运行转换完成的 Vite 项目.\n\n\u003e 注意：默认转换的是 vue-cli 项目。 传入 `-t webpack` 选项来转换 webpack 项目。\n\n## 选项\n该命令行工具提供以下选项：\n```\n$ webpack-to-vite --help\n  \nUsage: webpack-to-vite [options] [root]\n\nOptions:\n  -v, --version            显示版本号\n  -d --rootDir \u003cpath\u003e      要转换的项目目录\n  -t --projectType \u003ctype\u003e  项目类型，传入 vue-cli 或 webpack（默认：vue-cli）\n  -e --entry \u003ctype\u003e        整个构建过程的入口，webpack 或 vite 会从那些入口文件开始构建，如果没有指定入口文件，则默认使用 src/main.ts 或 src/main.js\n  -c --cover               使用此选项，转换的项目文件将覆盖原文件\n  -h, --help               显示命令帮助\n```\n\n## 成功转换的项目\n\n以下是使用工具成功从 webpack 项目转换为 vite 项目的项目列表\n\n### demos\n- [helloworld-vue2](https://github.com/originjs/webpack-to-vite-demos/tree/main/helloworld-vue2)\n- [helloworld-vue3](https://github.com/originjs/webpack-to-vite-demos/tree/main/helloworld-vue3)\n- [helloworld-webpack](https://github.com/originjs/webpack-to-vite-demos/tree/main/helloworld-webpack)\n\n### vue-cli\n- [vue-manage-system](https://github.com/lin-xin/vue-manage-system) -\u003e [vue-manage-system-vite](https://github.com/originjs/webpack-to-vite-demos/tree/main/vue-manage-system-vite)\n- [newbee-mall-vue3-app](https://github.com/newbee-ltd/newbee-mall-vue3-app) -\u003e [newbee-mall-vue3-app-vite](https://github.com/originjs/webpack-to-vite-demos/tree/main/newbee-mall-vue3-app-vite)\n- [vue-realworld-example-app](https://github.com/gothinkster/vue-realworld-example-app) -\u003e [vue-realworld-example-app-vite](https://github.com/originjs/webpack-to-vite-demos/tree/main/vue-realworld-example-app-vite)\n\n### webpack\n- [vue-uploader](https://github.com/simple-uploader/vue-uploader) -\u003e [vue-uploader-vite](https://github.com/originjs/webpack-to-vite-demos/tree/main/vue-uploader-vite)\n- [douban](https://github.com/jeneser/douban) -\u003e [douban-vite](https://github.com/originjs/webpack-to-vite-demos/tree/main/douban-vite)\n\n## 转换项\n以下是需要转换的配置项列表\n\n图例注解：\n\n| 图例 | 描述 |\n| ---- | ---- |\n|✅|通过 `webpack-to-vite` 自动转换|\n|⚠️|需要手动转换|\n|❌|目前不支持|\n\n### 基础转换项\n* ✅ B01: 在 `package.json` 中添加需要的 devDependencies 和 dependencies\n  * 必要的依赖：`vite-plugin-env-compatible`, `vite-plugin-html`, `vite`,\n  * Vue2 项目需要的依赖：`vite-plugin-vue2`\n  * Vue3 项目需要的依赖：`@vue/compiler-sfc`, `@vitejs/plugin-vue`, `@vitejs/plugin-vue-jsx`\n* ✅ B02: 将 vite 入口文件 `index.html` 添加到根目录\n  * 支持在 `vue.config.js` 的 `pages` 选项中配置的多个入口的转换\n  * 以这种方式添加入口：`\u003cscript type=\"module\" src=\"/src/main.js\"\u003e\u003c/script\u003e`，不需要添加 `dev-client` 入口，因为 vite 默认支持 HMR\n* ✅ B03: 将 vite 配置文件 `vite.config.js` 添加到根目录\n* ✅ B04: 在 `vite.config.js` 中导入和使用需要的插件\n  * 必要的插件： `vite-plugin-env-compatible`\n  * Vue2 项目需要的插件：`vite-plugin-vue2`，默认通过 `{ jsx: true }` 选项启用 `jsx` 支持\n  * Vue3 项目需要的插件：`@vitejs/plugin-vue`, `@vitejs/plugin-vue-jsx`\n* ✅ B05: 支持省略 `.vue` 扩展名的导入\n  * ~~在 `vite.config.js` 中，设置 `resolve.extensions` 配置项为 `['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']`，\n    然后您可能会遇到 \"[Problems caused by using alisaes and omitting file suffixes at the same time](https://github.com/vitejs/vite/issues/3532)\" 这样的问题，\n    我们使用补丁来解决这个问题，在 vite 接受相关 PR 之前~~\n    自从 vite 发布 `^2.5.0` 版本后已修复\n* ✅ B06: sass 支持\n  * 如果项目使用到 `node-sass` 依赖，则转换为 `sass` 依赖\n* ✅ B07: postcss 8 支持\n  * 如果项目使用到 `postcss 8` ，则添加 `postcss` 依赖\n* ⚠️ B08: 修复问题 '[No matching export for import typescript interface](https://github.com/vitejs/vite/issues/2117)'\n  * 请勿在 vite 中重复导出 typescript 类型或接口。 您只能在文件 A 中将其导出，然后在文件 B 中将其导入。不要尝试在文件 B 中将其再次导出。\n    以下是重复导出类型或接口时出现的错误：\n\n  ```\n  Uncaught SyntaxError: The requested module '/src/app/reducers/state.ts' does not provide an export named 'RootState'\n  ```\n  * 删除 typescript 项目中所有重复导出的类型或接口，并修改相关导入路径即可\n* ⚠️ B09: 删除模块热更新（或 HMR）相关代码，因为 vite 默认支持 HMR\n  * 项目包含 HMR 相关代码时出现以下错误：\n\n  ```\n  index.tsx:6 Uncaught ReferenceError: module is not defined\n    at index.tsx:6\n  ```\n* ⚠️ B10: CSS Modules\n  * 在 vite 中，任何以 `.module.css` 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件\n  * 这意味着您需要将以 `.css` 为后缀的文件转换为以 `.module.css` 为后缀的文件来实现 CSS Modules\n* ✅ B11: `html-webpack-plugin` 支持\n  * 插件选项将被应用至 `vite-plugin-html` 插件\n  * 注入到 `index.html` 中的变量将被转换。例如，`\u003c%= htmlWebpackPlugin.options.title %\u003e` -\u003e `\u003c%= title %\u003e`\n  * 从 `html-webpack-plugin` 中引用 `injectHtml` 和 `minifyHtml` 并且配置选项：\n  ```js\n  plugins: [\n    createHtmlPlugin({\n      inject: {\n        data: {\n          title: value,\n        },\n      },\n      minify: {\n        minifyCss: true\n      }\n    })\n  ]\n  ```\n* ⚠️ B12: 特定的 Vite 插件\n  * 你需要根据项目引入特定的 Vite 插件，该工具并不能做到识别和引入。\n  * 例如，如果之前使用了 `windi.css`，你应该检查 Vite 是否已经支持它，然后参考指导说明，手动引入使用相关的插件（[vite-plugin-windicss](https://windicss.org/integrations/vite.html)）。\n\n### Vue-CLI 转换项\n\u003e Vue-CLI 转换是将 `vue.config.js` 中的配置，转换后设置到 `vite.config.js` 中\n\n* ✅ V01: public path 环境变量\n\n* `process.env.PUBLIC_URL` 或 `publicPath` 或 `baseUrl` -\u003e `base`\n\n* ✅ V02: css 配置\n  * `css.loaderOptions` -\u003e `css.preprocessorOptions`\n  \n  * `css.loaderOptions.less.lessOptions.modifyVars` -\u003e `css.preprocessorOptions.less.modifyVars`\n  * 在 Vue-CLI 项目中，`sass` 配置可以同时生效于 `sass` 和 `scss` ，而在 vite 项目中需要对它们分别进行单独配置。因此，即使在 Vue-CLI 项目中只进行了 `css.loaderOptions.sass` 配置，也会在 vite 项目中生成 `css.preprocessorOptions.sass` 和 `css.preprocessorOptions.scss` 两个配置；而如果在 Vue-CLI 项目中只进行 `css.loaderOptions.scss` 配置，则在 vite 项目中只生成 `css.preprocessorOptions.scss` 配置\n  \n* ✅ V03: server 配置\n  * 默认添加 `server.strictPort = false` 配置\n  * `process.env.PORT` 或 `devServer.port` -\u003e `server.port`\n  * `process.env.DEV_HOST` 或 `devServer.public` 或 `devServer.host` -\u003e `server.host` ，并将 `http://` 或 `https://` 替换为 `''`\n  * `devServer.open`, `devServer.https` -\u003e `server.open`, `server.https`\n  * `devServer.proxy` -\u003e `server.proxy` ，另外在 proxy 配置中，进行 `pathRewrite` -\u003e `rewrite` 转换\n  \n* ✅ V04: build 配置\n  * `outputDir` -\u003e `build.outDir`\n  * `css.extract` -\u003e `build.cssCodeSplit`\n  * 如果配置了 `process.env.MODERN === 'true'` ，则添加配置 `build.minify = esbuild`\n  * `process.env.GENERATE_SOURCEMAP === 'true'` 或 `vueConfig.productionSourceMap` 或 `css.sourceMap` -\u003e `build.sourcemap`\n  \n* ✅ V05: `resolve.alias` 配置\n  * 默认添加 alias 配置\n\n  ```javascript\n  resolve: {\n    alias: [\n      { find: '/^~/', replacement: ''},\n      { find: '@', replacement: path.resolve(__dirname,'src') }\n    ]\n  }\n  ```\n  * webpack 中的 alias 配置也会按照类似的方式进行转换\n\n* ✅ V06: 客户端环境变量\n  * 提取 jsp 脚本 tag 中的环境变量\n  * `VUE_APP_VARIABLE` -\u003e `process.env['VUE_APP_VARIABLE']`\n  \n* ✅ V07: css 自动化导入\n  * 如果使用 'style-resources-loader' 加载 css 预处理器资源，即 `pluginOptions['style-resources-loader']` ，配置将被转换并写入`css.preprocessorOptions`\n\n  ```javascript\n  pluginOptions: {\n    'style-resources-loader': {\n      preProcessor: 'less',\n      patterns: [\n        resolve('src/styles/var.less'),\n        resolve('src/styles/mixin.less')\n      ]\n    }\n  }\n  ```\n  -\u003e\n  ```javascript\n  css: {\n    preprocessorOptions: {\n      less: {\n        additionalData: `@import \"src/styles/var.less\";@import \"src/styles/mixin.less\";`\n      }\n    }\n  }\n  ```\n* ✅ V08: 转换函数形式的 webpack 配置\n  * `vue.config.js` 模块中的 `webpackConfigure` 和 `chainWebpack` 选项可以定义为对象或者函数\n  * 为了避免在调用这些函数时报错，我们按需初始化 `config` 选项，并且生成一个临时文件(`vue.temp.config.js`)来重新配置 `html-webpack-plugin`\n\n### Webpack 转换项\n\u003e Webpack 转换是将`webpack.config.js` 或 `webpack.base.js/webpack.dev.js/webpack.prod.js` 或 `webpack.build.js/webpack.production.js` 中的配置，转换后设置到 `vite.config.js` 中\n\n\u003e 注意：如果您没有在上述文件中进行 webpack 配置，那么工具将无法进行配置转换，您需要手工配置\n\n* ✅ W01: 构建入口配置\n  * 如果 `entry` 类型是 `string` ，`entry` -\u003e `build.rollupOptions.input`\n  * 如果 `entry` 类型是 `object` ，则将 object 中的每条属性配置到 `build.rollupOptions.input` 中\n  * 如果 `entry` 类型是 `function` ，则将 function 的运行结果配置到 `build.rollupOptions.input` 中\n* ✅ W02: output 配置\n  * `output.path` -\u003e `build.outDir`\n  * `output.filename` -\u003e `build.rollupOptions.output.entryFileNames`\n  * `output.chunkFilename` -\u003e `build.rollupOptions.output.chunkFileNames`\n* ✅ W03: `resolve.alias` 配置\n  * 添加默认 alias 配置\n\n  ```javascript\n  resolve: {\n    alias: [\n      { find: '@', replacement: path.resolve(__dirname,'src') }\n    ]\n  }\n  ```\n  * webpack 配置的其他别名也会按照上述格式进行转换\n  * 以 `$` 结尾的 `resolve.alias` 配置，需要删除 `$` 并配置为确切的值\n* ✅ W04: server 配置\n  * `devServer.host`, `devServer.port`, `devServer.proxy`, `devServer.https`, `devServer.contentBase` -\u003e `server.host`, `server.port`, `server.proxy`, `server.https`, `server.base`\n* ✅ W05: define 配置\n  * `new webpack.DefinePlugin()` -\u003e `define`\n  \n### 其他转换项\n* ⚠️ O01: 使用 CommonJS 规范语法，例如 `require('./')`\n  * 添加 vite 插件 `@originjs/vite-plugin-commonjs` ，参阅[这里](https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-commonjs)\n  * 请注意该插件只支持部分 CommonJS 规范语法，这意味着一些语法是不支持的，您需要手动转换为 ES Modules 规范语法\n  * 转换动态 require(例如：`require('@assets/images/' + options.src)`)，你可以参考以下步骤\n  1. 使用 Web API `new URL`\n  ```vue\n  \u003ctemplate\u003e\n  \u003cimg alt=\"\" :src=\"imgSrc\" /\u003e\n  \u003c/template\u003e\n  \u003cscript\u003e\n  export default {\n  name: 'img',\n  data: () =\u003e ({\n    imgSrc: new URL('./assets/logo.png', import.meta.url).href\n  })\n  }\n  \u003c/script\u003e\n  ```\n  ...或使用 Vite 的 API `import.meta.glob`\n  1. 创建一个模型保存已导入的模块,使用异步方法动态地导入模块并更新到模型中\n  ```js\n  // src/store/index.js\n  import Vue from 'vue'\n  import Vuex from 'vuex'\n  const assets = import.meta.glob('../assets/**')\n  Vue.use(Vuex)\n  export default new Vuex.Store({\n    state: {\n      assets: {}\n    },\n    mutations: {\n      setAssets(state, data) {\n        state.assets = Object.assign({}, state.assets, data)\n      }\n    },\n    actions: {\n      async getAssets({ commit }, url) {\n        const getAsset = assets[url]\n        if (!getAsset) {\n          commit('setAssets', { [url]: ''})\n        } else {\n          const asset = await getAsset()\n          commit('setAssets', { [url]: asset.default })\n        }\n      }\n    }\n  })\n  ```\n  2. 在 `.vue` 单文件组件中使用\n  ```js\n  // img1.vue\n  \u003ctemplate\u003e\n    \u003cimg :src=\"$store.state.assets['../assets/images/' + options.src]\" /\u003e\n  \u003c/template\u003e\n  \u003cscript\u003e\n  export default {\n    name: \"img1\",\n    props: {\n      options: Object\n    },\n    watch: {\n      'options.src': {\n        handler (val) {\n          this.$store.dispatch('getAssets', `../assets/images/${val}`)\n        },\n        immediate: true,\n        deep: true\n      }\n    }\n  }\n  \u003c/script\u003e\n  ```\n* ❌ O02: 对于 `Element-UI` ，参阅[这里](https://github.com/vitejs/vite/issues/3370)\n\n  ```\n   [vite] Uncaught TypeError: Cannot read property '$isServer' of undefined\n    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/dom.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1189)\n    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)\n    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/popup/popup-manager.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1478)\n    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)\n    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/popup/index.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:1701)\n    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)\n    at node_modules/_element-ui@2.15.1@element-ui/lib/utils/vue-popper.js (:8080/node_modules/.vite/element-ui.js?v=675d2c77:2546)\n    at __require (:8080/node_modules/.vite/chunk-6VNJZP5B.js?v=675d2c77:12)\n    at Object.5 (:8080/node_modules/.vite/element-ui.js?v=675d2c77:6861)\n    at __webpack_require__ (:8080/node_modules/.vite/element-ui.js?v=675d2c77:6547)\n  ```\n* ⚠️ O03: 包含多个别名的导入，如：`@import '~@/styles/global.scss'`，同时包含了别名 `~` 和 `@`\n  * 您可以添加别名配置 `{ find: /^~@/, replacement: path.resolve(__dirname, 'src') }` 到 `resolve.alias` 配置中，并且把该项配置移到别名配置中的第一项\n* ⚠️ O04: 在 `.vue` 文件中使用 `jsx` 语法\n  * 确保您开启了 `jsx` 支持，在 Vue2 中，需要添加 `vite-plugin-vue2` 插件并传入 `{ jsx: true }` 配置，在 Vue3 中需要添加 `@vitejs/plugin-vue-jsx` 插件\n  * 添加 `lang=\"jsx\"` 属性到 `script` 标签，例如 `\u003cscript lang=\"jsx\"\u003e\u003c/script\u003e`\n  * 如果您遇到以下错误\n\n  ```\n  3:54:29 PM [vite] Internal server error: /Users/Chieffo/Documents/project/Vue-mmPlayer/src/base/mm-icon/mm-icon.vue?vue\u0026type=script\u0026lang.tsx: Duplicate declaration \"h\" (This is an error on an internal node. Probably an internal error.)\n  Plugin: vite-plugin-vue2\n  File: /Users/Chieffo/Documents/project/Vue-mmPlayer/src/base/mm-icon/mm-icon.vue?vue\u0026type=script\u0026lang.tsx\n      at File.buildCodeFrameError (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/core/lib/transformation/file/file.js:244:12)\n      at Scope.checkBlockScopedCollisions (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/scope/index.js:421:22)\n      at Scope.registerBinding (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/scope/index.js:581:16)\n      at Scope.registerDeclaration (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/scope/index.js:523:14)\n      at Object.BlockScoped (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/scope/index.js:240:12)\n      at Object.newFn (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/visitors.js:212:17)\n      at NodePath._call (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/path/context.js:53:20)\n      at NodePath.call (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/path/context.js:36:14)\n      at NodePath.visit (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/path/context.js:90:31)\n      at TraversalContext.visitQueue (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/context.js:99:16)\n      at TraversalContext.visitMultiple (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/context.js:68:17)\n      at TraversalContext.visit (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/context.js:125:19)\n      at Function.traverse.node (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/index.js:76:17)\n      at NodePath.visit (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/path/context.js:97:18)\n      at TraversalContext.visitQueue (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/context.js:99:16)\n      at TraversalContext.visitSingle (/Users/Chieffo/Documents/project/Vue-mmPlayer/node_modules/@babel/traverse/lib/context.js:73:19)\n  ```\n  您可以尝试更新 `babel.config.js` 配置文件，如下：\n\n  ```javascript\n  module.exports = {\n    presets: [\n      '@vue/app'\n    ]\n  }\n  ```\n  -\u003e\n  ```javascript\n  module.exports = {\n    presets: [\n      ['@vue/babel-preset-jsx']\n    ]\n  }\n  ```\n  参阅[这里](https://vuejs.org/v2/guide/render-function.html#JSX)\n* ⚠️ O05: 对于 Webpack 语法 `require.context`\n  * 添加 vite 插件 `@originjs/vite-plugin-require-context` ，参阅[这里](https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-require-context)\n* ✅ O06: 我们修复了错误 'Compiling error when the template of the .vue file has the attribute lang=\"html\"'\n  * 从 `template` 标签中移除 `lang=\"html\"` 属性，参阅[这里](https://github.com/vuejs/vue-loader/issues/1443)\n* ❌ O07: 不支持 Webpack 语法 `require.ensure`\n* ⚠️ O08: 如下所示，您需要手动把包含别名的动态导入转换为绝对路径或相对路径导入。参阅[这里](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations)\n\n  ```javascript\n  () =\u003e import('@/components/views/test.vue')\n  ```\n  -\u003e\n  ```javascript\n  () =\u003e import('./components/views/test.vue')\n  ```\n* ⚠️ O09：如果您遇到构建错误 `[rollup-plugin-dynamic-import-variables] Unexpected token`，则需要删除 `\u003cimg\u003e` 标签中的空属性 `srcset` 或 `srcset=\"\"`\n* ⚠️ O10: Vite 无法解析一些静态资源，如`.PNG`，你可以把它放在 `assetsInclude` 选项中，比如 `assetsInclude: ['**.PNG']`\n* ⚠️ O11：支持 `.md` markdown 文件作为 vue 组件，需要添加 [`vite-plugin-md`](https://github.com/antfu/vite-plugin-md) 插件\n* ⚠️ O12: 该错误 `Uncaught ReferenceError: global is not defined`, 参阅[这里](https://github.com/vitejs/vite/issues/2618#issuecomment-820919951)\n  * \u003e 作为参考，如果您只需要垫片 global，您可以将`\u003cscript\u003ewindow.global = window;\u003c/script\u003e`添加到您的`index.html`中\n* ⚠️ O13: 支持将SVG文件作为Vue组件加载\n  * ... 或遇到以下错误时\n  ```\n  Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/@fs/D:/project/example/node_modules/@example/example.svg') is not a valid name.\n  ```\n  * 添加 [`vite-svg-loader`](https://github.com/jpkleemans/vite-svg-loader) 插件用于 **vue** 项目\n  * 添加 [`vite-plugin-svgr`](https://www.npmjs.com/package/vite-plugin-svgr) 插件用于 **react** 项目\n* ⚠️ O14: 修复以下错误\n  ```\n  [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias \"vue\" to \"vue/dist/vue.esm-bundler.js\".\n  ```\n  * 您需要设置别名，如下所示\n  ```javascript\n  resolve: {\n    alias: [\n      { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js' }\n    ]\n  }\n  ```\n* ⚠️ O15: 出于以下原因，您可能需要安装 [`vite-plugin-optimize-persist`](https://github.com/antfu/vite-plugin-optimize-persist) 插件\n  \u003e Vite 的依赖预构建是很酷的，大大地提升了开发体验。虽然 Vite 可以智能地检测动态依赖关系，但它的按需检测行为有时会使复杂项目的启动相当缓慢。\n  ```\n  [vite] new dependencies found: @material-ui/icons/Dehaze, @material-ui/core/Box, @material-ui/core/Checkbox, updating...\n  [vite] ✨ dependencies updated, reloading page...\n  [vite] new dependencies found: @material-ui/core/Dialog, @material-ui/core/DialogActions, updating...\n  [vite] ✨ dependencies updated, reloading page...\n  [vite] new dependencies found: @material-ui/core/Accordion, @material-ui/core/AccordionSummary, updating...\n  [vite] ✨ dependencies updated, reloading page...\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foriginjs%2Fwebpack-to-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foriginjs%2Fwebpack-to-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foriginjs%2Fwebpack-to-vite/lists"}