要将Vue 2项目从Webpack迁移到Vite,你可以按照以下步骤进行操作: 1. 理解并备份当前Vue2 + Webpack的项目结构和配置 首先,你需要对现有的Vue 2 + Webpack项目有深入的理解,并备份整个项目结构和所有配置文件。这包括但不限于webpack.config.js、package.json、babel.config.js等文件。 2. 安装Vite并初始化新...
把项目代码改成vue2写法,确保新vite项目可以正常运行vue2 把原webpack项目生产环境依赖复制到vite项目,剔除掉webpack相关的插件依赖 复制原项目src文件代码和其他业务相关代码到新vite项目。 新vite项目配置开发环境启动命令,根据报错信息来进行调整。 在测试开发和打包环境都没问题后,替换原先的项目。
case1:src/demo1/index.vuecase2:src/demo2/index.jscase3:src/demo3.vue// ❌ in vite , in webpackimportdemo1from'src/demo1'importdemo2from'src/demo2'importdemo3from'src/demo3' 也就是说, vite会找不到文件夹内的index.js,index.vue以及你在webpack默认省略拓展名.vue, 也会导致找不到文...
1. vite 目前要求入口文件必须是根目录下的 index.html，如果之前的 webpack 入口文件同名，需要更改。解决方案：vite.config.js:import { injectHtml } from 'vite-plugin-html'; export default defineConfig({ plugins:[ injectHtml({ // 入口文件 index.html 的模板注入 injectData: { // 模板注...
前端工程化vue2+webpack3项目迁移vite2踩坑总结：一、迁移过程中的主要问题 依赖与配置问题：Vue2支持：vite默认支持Vue3，需要安装vitepluginvue2插件来支持Vue2项目。依赖缺失：迁移过程中可能会出现找不到依赖的问题，需要确保所有依赖都已正确安装。路径问题：由于项目结构的变化，路径配置可能需要调整。
2. 在根目录新建一个文件 vite.config.js, 复制以下内容 /** 本地开发用 */import{ defineConfig }from'vite'import*aspathfrom'path'importfsfrom'fs'import{ createVuePlugin }from'vite-plugin-vue2'// 支持 vue2// 兼容webpack里面的require.context() 把require.context() 转成 import ... from ....
公司内部 OA 系统,基于 vue2+webpack2 开发,目前页面有上百个,每次启动开发或者编译都需要至少 5 分钟,非常慢。由于 vite 官方没有原生支持 vue2.0,需要依赖于第三方插件,而且对于编译的稳定性和风险没办法保证,因此本次引入 vite 优先保证本地开发服务器的运行,尽量避免修改代码,编译还是由原来的 webpack 来执...
2024 年了,webpack 构建的 vue2 项目,由于路由较多,每次修改都会出现编译时间较长的问题(平均 10～40 秒),长期开发的话,非常的不友好。因此决定升级 vite构建。参考了几篇文章,基本 每篇遇到的坑都不少。 本文做一个记录。 主要是各个依赖的版本问题。 全局安装的 v
一、package.json修改与vite相关插件安装,index.html中加入 ```1、先加上启动命令 "scripts": { "dev": "vue-cli-service serve", "build": "vue-cli-service build", "deploy": "npx deploy", "vite": "vite" //这个就是新增的vite启动命令 }, 2、安装...
在重构过程中，仅对开发环境构建逻辑进行调整，生产环境打包仍采用webpack，以降低整体大升级的风险。之所以选择Vite，是因为其在处理大项目时展现出的效率和灵活性。迁移过程中，会遇到各种挑战。例如，项目中的模块解析、Vue2中使用JSX语法、依赖模块引用、less样式全局模块查找、commonjs导入错误、CSS语法...