长沙网站微信开发,安阳住房与城乡建设局官方网站,龙岩本地论坛,南通优普网站建设团队文章目录 前言方案一#xff08;借用插件转换#xff09;启动命令#xff0c;转换方案一转换遇到的问题 方案二#xff08;手动调整#xff09;方案两者对比小结 前言 vue cli 脚手架转成vite启动
简单说说这个项目的一些底层基本结构哈#xff0c;以及写这篇博客的目的… 文章目录 前言方案一借用插件转换启动命令转换方案一转换遇到的问题 方案二手动调整方案两者对比小结 前言 vue cli 脚手架转成vite启动
简单说说这个项目的一些底层基本结构哈以及写这篇博客的目的。
这个项目底层结构是vue2.7.14 vant 使用vue cli脚手架搭建的一个H5项目由于内容比较多并没有使用vue3重构但是由于内容过多渐渐的启动特别耗时所以计划该用vite去优化启动项。
写这篇博客是记录本人在这个转换过程中遇到的一些问题。
在实际的过程中我用了两种方案第一种利用插件webpack-to-vite。第二种是自己搭建vite。
方案一借用插件转换 webpack-to-vite wp2vite
在我动手之前就各种百度查资料了哈因为我想秉持着偷懒的原则想利用插件快速转换。 在我浏览了n个网站后找到了感觉还比较可靠的两种插件当然第二个插件我没用我这里用的是第一个插件。
以下两个插件地址 webpack-to-vite wp2vite
由于我是用了第一个插件接下来的方案一都是围绕第一个插件开始的。
启动命令转换
// project path 项目地址
npx originjs/webpack-to-vite project path
或者
npm install originjs/webpack-to-vite -g
webpack-to-vite project path转换后会在你项目中的同级目录下生成一个project-name-TOVITE文件这个文件就是转换后的了。 最后就是打开安装包启动了然后开始踩坑了。
方案一转换遇到的问题
Error: Vue packages version mismatch: 研究了下这个问题呢其实是在说vue的包版本不匹配。那就手动改改咯vue-template-compiler版本改成2.7.14。 问题解决跑起来了跑起来空的 这里我猜测是index.html没有配置main.ts的引入导致的所以我在vite.config.js加上了一些配置。 加完运行起来又抛了一个错误。TypeError: vite.createFilter is not a function 这个错误我查了下说是表明你正在尝试调用vite.createFilter这个函数但是在你当前的Vite版本中这个函数不存在或者已经被重命名、移除或者未正确导出。让我升级下版本我就升级了vite这个问题结束又出现新的问题。[vite] Internal server error: Unexpected token (9:900) 我怀疑是vite-plugin-vue2插件的问题于是换了一个在vite.config.js中加上了以下代码。
import vue from vitejs/plugin-vue2
plugins: [vue(),
]然而引发了下面这个问题。
[Vue warn]: Failed to mount component: template or render function not defined. 好不容易跑起来了结果页面抛出了又一个错误。 一脸懵逼的我继续百度查问题说是可能是vue的问题于是我把上面的给去掉了回归到上一个问题上。 但是这不就进入死循环了还是说上个问题是其他原因导致的。
绕来绕去我放弃了方案一了我打算不用这个转的自己安装vite配置vite.config.js 也不能说这合格插件不行吧可能我这项目比较复制比较老不适合
方案二手动调整
以下是我手动的方式调整文件
package.json文件 // 运行命令serve-vite: vite --host// 额外安装包originjs/vite-plugin-commonjs: ^1.0.3, // 用于将一些commonJs的规范转成es的postcss-plugin-px2rem: ^0.8.1, // px单位转成rem配置vite-plugin-html: ^3.2.2,vite-plugin-style-import: ^2.0.0, // 这个是用来处理vant的样式配置问题vitejs/plugin-vue2: ^2.3.1, // 兼容vue2vite: ^5.4.10, // vite根目录增加 testVite.html里面内容和vue cli脚手架里的index.html是一摸一样的唯一的不同是增加了以下代码 !-- 这里是为了处理一个 Uncaught ReferenceError: global is not defined 问题--!-- 出现这个的原因 在 Node.js 环境中global 通常是一个特殊的对象它提供了一种方法来定义全局变量或访问全局变量。但在浏览器环境或者使用 Vite 开发环境中global 对象并不存在因此会抛出此错误。 --!-- vite 运行会导致这个问题出现 --script// 处理 Uncaught ReferenceError: global is not defined 的问题if (window.global undefined) {window.global window;}/scripttsconfig.json文件 moduleResolution: node // 增加配置vite.config.js文件
import vue from vitejs/plugin-vue2 // 使用第三方插件
import postcssPluginPx2rem from postcss-plugin-px2rem
import AutoImport from unplugin-auto-import/vite
import { defineConfig } from vite
import { resolve } from path
import { createHtmlPlugin } from vite-plugin-html
import { createStyleImportPlugin, VantResolve } from vite-plugin-style-import
import { viteCommonjs } from originjs/vite-plugin-commonjsconst pathResolve (dir) {return resolve(__dirname, ., dir)
}export default async ({ command, mode }) {const unoCSS (await import(unocss/vite)).defaultreturn defineConfig({resolve: {extensions: [.mjs, .js, .ts, .jsx, .tsx, .json, .less, .css, .vue, .min.js],alias: {: pathResolve(./src),swiper/swiper-bundle.min.js: pathResolve(./node_modules/swiper/swiper-bundle.min.js) // 这个代码很重要兼容swiper8.0.7以上版本的导入问题}},plugins: [vue(),unoCSS(),viteCommonjs(),createHtmlPlugin({minify: true,// 注指定entry后不需要在index.html添加script标签若添加了建议删除entry: ./src/main.ts,template: ./testVite.html,inject: {data: {title: index,injectScript: script src./inject.js/script}}}),AutoImport({// 自动导入 Vue 相关函数如ref, reactive, toRef 等imports: [vue]// dts: resolve(__dirname, ./auto-imports.d.ts),// eslintrc: {// // 已存在文件设置默认 false需要更新时再打开防止每次更新都重新生成// enabled: false,// // 生成文件地址和名称// filepath: resolve(__dirname, ./.eslintrc-auto-import.json),// globalsPropValue: true// }}),createStyleImportPlugin({resolves: [VantResolve()]})],css: {preprocessorOptions: {less: {math: always}},postcss: {plugins: [postcssPluginPx2rem({// remUnit: 16 // 设计稿宽度/10通常是750/1075rootValue: 16,unitPrecision: 8,mediaQuery: false})]}},server: {port: 9528,proxy: {// 选项写法/api: {target: http://127.0.0.1:8000,// target: http://172.16.111.33:9797/rpc, // ToDo开发changeOrigin: true,rewrite: (path) path.replace(/^\/api/, )}},hmr: {overlay: false},host: 0.0.0.0}})
}
方案两者对比
最后其实我是采用方案二的方式跑起来项目了当然方案二过程中也是遇到一些问题比如swiper的导入问题抛出这合格错误Pre-transform error: Missing ./swiper-bundle.min.js specifier in swiper package 我并不想去降版本或者升级版本或者改业务逻辑代码去解决这个问题哈所以我在配置上增加了额外的配置去解决因为改业务场景一来涉及的页面可能很多而来需要一个一个测试比较繁琐。
第一种方案呢我并没有成功一来我并不知道插件转后加了那些东西二来我也是遇到问题解决问题但是众所周知很多问题可能是因为你第一个解决的方法不完全对而引起的当然我也看到一些大神是确实可以实现的要不然官方也不可能把这个插件收录了。
小结
最后其实我转的还不是很完全也不是很完美后期我也发现一个瑕疵。 不完全的地方在于我并没有处理打包的逻辑仅仅只是开发预览转换了。 瑕疵在于我发现热更新的时候会抛出这个问题。 我很纳闷第一次运行是没问题的但是更改业务代码热更新后就会抛出这个问题我也查询过意思是在未初始化之前就使用了。但是我检查了main.ts文件很久没发现那不对后面发现我这个项目很多地方引入了实例比如router比如vm这就导致了依赖循环问题所以其实是个无解的。
最后个人建议还是不要把成熟的vue2的项目强制转成vite吧代价挺大同时vite个人感觉确实启动很快但是打包的配置并没有webpack多元化而且vite当中加载的顺序十分重要稍微没处理好就是失败了。
以上就是我这次转换vite的经历了简单记录一下。
