在使用vite命令本地构建项目无误之后,尝试在本地使用npm run build构建生产环境的文件的时候出现了一些问题 1、与vite支持的语法冲突 解决方法:webpack引入相应loader,babel引入相应的plugins兼容vite语法 安装这两个依赖 //"@open-wc/webpack-import-meta-loader":"^0.4.7","babel-preset-vite":"^1.0.4", 分...
首先, 加入 Vite 的相关配置。 这里我使用了一个 cli 工具: wp2vite. 安装好之后, 直接执行: 这一步, 会自动生成 Vite 的配置文件,并引入相关的依赖。 把依赖安装一下, 启动就可以了。 如果没有意外的话, 你会收获一堆报错。 恭喜你,进入开心愉快的踩坑环节。 我在改造过程中遇到的问题 1. alias 错误 ...
很多cra项目中使用了styled-component/macro,但是他们都依赖babel-macro插件,因为 cra 自带babel-macro插件,styled-component/macro可以被正常解析,但是在vite中没有集成babel-macro这种插件,配置vite-plugin-babel-macros解决这个报错。 importmacrosPluginfrom'vite-plugin-babel-macros'plugins:[macrosPlugin()], 5、启用...
最近一直在看vite的源码(传送),恰逢公司的项目使用的是webpack,正好借此机会做下迁移,并将该过程记录。当前项目使用webpack+vue2 对比 这里挑选了一个比较复杂的路由页面,分别使用vite和webpack启动,记录从npm run start到页面加载的耗时 vite webpack 基础改造 package.json中新建指令 alias别名 和webpack一样,配置...
在这里我自己写了一个插件解决这几种情况. 你也可以直接使用我的插件vite-plugin-path-resolve // vite.config.jsimportpathResolvefrom'vite-plugin-path-resolve'functiongetPath(dir){returnpath.resolve(path.dirname(fileURLToPath(import.meta.url)),dir)}exportdefaultdefineConfig({plugins:[pathResolve({src...
在webpack中使用require 这样动态引入组件地址,重构使用vite 的import.meta.glob(@/views/**/*.vue) 替换 const routeAllPathToCompMap = import.meta.glob(`@/views/**/*.vue`) console.log(routeAllPathToCompMap,'routeAllPathToCompMap') route.component = routeAllPathToCompMap[`/src/views/${route....
(期待再多点这种方便的后门)在这种情况下我们进行webpack迁移到vite就会出现一系列的报错,并且由于配置文件不熟悉rollup也同时给我们的项目带来了不确定性,那么我不想动我原本的项目就像体验一下vite飞一般的感觉就是我的初始目标了。 how to do 把大象放进冰箱分几步?
目录前言迁移前后对比迁移流程迁移业务代码到vite项目项目开发阶段报错处理项目打包阶段处理总结一. 前言公司有个特别大维护时间长的后台管理系统,使用的是v...
The converted Vite project could be found in a new directoryfilename-toVite. Note: the default conversion is vue-cli project. Pass in the-t webpackoption to convert a webpack project. Options The CLI provides the following options:
CypressforbothUnitandEnd-to-Endtesting ESLintforcodequality Prettierforcodeformating 官方最新文档已经看不到vue-cli的身影了，只有create-vue的使用方式，所以大家可以放心食用。vite官网：https://cn.vitejs.dev/ Vite（法语意为"快速的"，发音?/vit/，发音同"veet"）是一种新型前端构建工具，能够...