vue2.7.14 + vant + vue cli脚手架转vite启动运行问题记录

news2024/12/23 12:50:19

文章目录

    • 前言
    • 方案一（借用插件转换）
        • 启动命令，转换
        • 方案一转换遇到的问题
    • 方案二（手动调整）
    • 方案两者对比
    • 小结

前言

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", // 兼容vue2
  "vite": "^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;
      }
    </script>
  • tsconfig.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-commonjs'

const pathResolve = (dir) => {
  return resolve(__dirname, '.', dir)
}

export default async ({ command, mode }) => {
  const unoCSS = (await import('unocss/vite')).default

  return 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/10=75
            rootValue: 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的经历了，简单记录一下。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2240691.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

边缘提取函数 [OPENCV--2]

边缘提取函数 [OPENCV--2]

OPENCV中最常用的边界检测是CANNY函数 下面展示它的用法 通常输入一个灰度图像&#xff08;边界一般和颜色无关&#xff09;这样也可以简化运算cv::Canny(inmat , outmat , therhold1, therhold2 ) 第一个参数是输入的灰度图像&#xff0c;第二个是输出的图像这两个参数都是引用…
阅读更多...
SpringBoot基础系列学习(七):整合Mybatis

SpringBoot基础系列学习(七):整合Mybatis

文章目录 一丶介绍1.基本信息2.特性 二丶代码1.项目结构2.数据表3.引入依赖4.实体类5.mapper6.sql.xml7.Controller8.结果 一丶介绍 1.基本信息 MyBatis 是一款优秀的持久层框架&#xff0c;它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手…
阅读更多...
什么岗位需要学习 OpenGL ES ？说说 3.X 的新特性

什么岗位需要学习 OpenGL ES ？说说 3.X 的新特性

什么是 OpenGL ES OpenGL ES 是一种为嵌入式系统和移动设备设计的3D图形API（应用程序编程接口）。它是标准 OpenGL 3D 图形库的一个子集，专门为资源受限的环境（如手机、平板电脑、游戏机和其他便携式设备）进行了优化。 由于其在移动设备上的广泛适用性，OpenGL ES是学习移…
阅读更多...
记一次谷歌chrome浏览器 18 以上和 18 以下，最小字号不一致，导致的样式兼容问题解决过程

记一次谷歌chrome浏览器 18 以上和 18 以下，最小字号不一致，导致的样式兼容问题解决过程

**记录一次谷歌chrome浏览器 18 以上和 18 以下&#xff0c;最小字号不一致&#xff0c;导致的样式兼容问题解决过程&#xff1a;** 定位问题尝试解决方案第一时间想到的解决方案&#xff1a;方案一尝试方案二&#xff1a;scale 缩放方案三&#xff1a;rem、em测试 方案四 SVG最…
阅读更多...
Elasticsearch 和 Kibana 8.16：Kibana 获得上下文和 BBQ 速度并节省开支！

Elasticsearch 和 Kibana 8.16：Kibana 获得上下文和 BBQ 速度并节省开支！

作者&#xff1a;来自 Elastic Platform Product Team Elastic Search AI 平台&#xff08;Elasticsearch、Kibana 和机器学习&#xff09;的 8.16 版本包含大量新功能&#xff0c;可提高性能、优化工作流程和简化数据管理。 使用更好的二进制量化 (Better Binary Quantizatio…
阅读更多...
HarmonyOS Next星河版笔记--界面开发（5）

HarmonyOS Next星河版笔记--界面开发（5）

1.字符串 1.1.字符串拼接 作用&#xff1a;把两个或多个字符串&#xff0c;拼成一个字符串。&#xff08;通常是用来拼接字符串和变量&#xff09; hello world > helloworld 加好作用&#xff1a;拼接 let name:string 小明 console.log(简介信息,名字是 name) …
阅读更多...
kafka中topic的数据抽取不到hdfs上问题解决

kafka中topic的数据抽取不到hdfs上问题解决

在上一个博客中有一个案例&#xff1a; 将json文件抽取到kafka的消息队列&#xff08;topic&#xff09;中&#xff0c;再从topic中将数据抽取到hdfs https://blog.csdn.net/qq_62984376/article/details/143759037?spm1001.2014.3001.5501 我们在从kafka中topic的数据抽到hdf…
阅读更多...
scala中的case class

scala中的case class

package test_27 //Set的特点&#xff1a;唯一&#xff08;元素不同&#xff09;&#xff1b;无序 //case class定义一组数据 case class Book(var bookName:String,var author:String,var price:Double){} object caseclass {def main(args: Array[String]): Unit {//定义一个…
阅读更多...
【Excel】数据透视表分析方法大全

【Excel】数据透视表分析方法大全

数据透视表的最常用的功能是分类汇总&#xff0c;其实它还有很强大的数据分析功能。在数据透视表右键菜单的值显示方式中&#xff0c;可以看到有14个很实用的分析选项。 1、总计的百分比 作用&#xff1a;透视表中每一个数字&#xff08;包括汇总行、总计行&#xff09;占右…
阅读更多...
交互新体验：Axure动态面板下的图片拖动技巧

交互新体验：Axure动态面板下的图片拖动技巧

交互新体验&#xff1a;Axure动态面板下的图片拖动技巧 前言 在数字产品的设计过程中&#xff0c;用户体验的每一个细节都至关重要。 动态交互效果&#xff0c;如拖动按钮控制图片展示区域&#xff0c;不仅能够提升用户的参与度&#xff0c;还能增强界面的直观性和互动性。 …
阅读更多...
批量将MySQL中的MyISAM引擎，改成InnoDB引擎

批量将MySQL中的MyISAM引擎，改成InnoDB引擎

一、InnoDB和MyISAM的区别 MySQL中InnoDB和MyISAM是两种常用的存储引擎&#xff0c;具有以下不同的特点&#xff1a; 序号InnoDBMyISAM说明事务支持支持不支持InnoDB可以处理更复杂的业务逻辑&#xff0c;而MyISAM在处理大量并发写入时可能会遇到问题‌锁定机制行级锁定表级锁…
阅读更多...
力扣经典面试题

力扣经典面试题

1.本题的目标是判断字符串ransomNote是否由字符串magazine中的字符构成&#xff0c;且由magazine中的每个字符只能在ransomNote中使用一次 2.采用的方法是通过一个字典cahr_countl来统计magazine字符串中每个字符出现的次数 3.然后遍历ransomNote字符串&#xff0c;对于其中的…
阅读更多...
灵神 刷题DAY1

灵神 刷题DAY1

Python与java的刷题的区别 1. Python没有分号 2. Python不能return的时候赋值 3. Python没有小括号和花括号 4. Python的循环很奇怪&#xff0c;没有for(int i0;i<32;i)这种形式 而是直接用的是for i in range(n)这种 5. Python中没有 6. Python中没有&& 是an…
阅读更多...
Servlet三小时速成

Servlet三小时速成

Servlet三小时速成 实例驱动的速成教程。自己敲一遍的话入门还是没问题的。如有错误请读着多多包涵。 Serlet的前辈&#xff1a;CGI 通用网关接口 CGI通过调用外部程序来处理HTTP请求&#xff0c;对于每个请求都会启动一个新的进程。 这就导致了许多问题&#xff0c;首先是…
阅读更多...
Qt主线程把数据发给子线程,主线程会阻塞吗

Qt主线程把数据发给子线程,主线程会阻塞吗

演示&#xff1a; #include <QCoreApplication> #include <QThread> #include <QObject> #include <QDebug>// 子线程类 class Worker : public QObject {Q_OBJECT public slots:void processData(int data) {qDebug() << "Processing dat…
阅读更多...
「QT」文件类 之 QTemporaryFile 临时文件类

「QT」文件类 之 QTemporaryFile 临时文件类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定制…
阅读更多...
探索Python的HTTP利器：Requests库的神秘面纱

探索Python的HTTP利器：Requests库的神秘面纱

文章目录 **探索Python的HTTP利器&#xff1a;Requests库的神秘面纱**一、背景&#xff1a;为何选择Requests库&#xff1f;二、Requests库是什么&#xff1f;三、如何安装Requests库&#xff1f;四、Requests库的五个简单函数使用方法1. GET请求2. POST请求3. PUT请求4. DELET…
阅读更多...
【Java语言】String类

【Java语言】String类

在C语言中字符串用字符可以表示&#xff0c;可在Java中有单独的类来表示字符串&#xff08;就是String&#xff09;&#xff0c;现在我来介绍介绍String类。 字符串构造 一般字符串都是直接赋值构造的&#xff0c;像这样&#xff1a; 还可以这样构造&#xff1a; 图更能直观的…
阅读更多...
jmeter常用配置元件介绍总结之线程组

jmeter常用配置元件介绍总结之线程组

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之线程组 1.线程组(用户)1.1线程组1.1.setUp线程组和tearDown线程组1.2.Open Model Thread Group(开放模型线程组)1.3.bzm - Arrivals Thread Group(到达线程组)1.4.jpgc - Ultimate Thread Group(终极线程组)1.5.jpgc - St…
阅读更多...
电工电子原理笔记

电工电子原理笔记

这一篇手记会记录我硬件开发过程中遇到的一些底层电学原理&#xff0c;并且结合实际场景作为“例题”&#xff08;出于篇幅和保密考虑会进行部分简化&#xff09;。 叠加定理 基本介绍 在线性电路中&#xff0c;任一支路的电流&#xff08;或电压&#xff09;可以看成是电路…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023