webpack 升级为 vite踩坑记持续更新webpack升级为vite踩坑记录和对应一些解决方法,大家可以一起来讨论

持续更新webpack升级为vite踩坑记录 1.import vueJsx from '@vitejs/plugin-vue-jsx' 报错

node 版本为14.14.0 报此错误

将node 版本切换为 16.16.0 正常运行 @vitejs/plugin-vue-jsx'可能很运行node版本有要求

nvm use切换版本时不起效，用管理员身份运行cmd，再执行nvm use成功切换node版本

Vue2中使用了 JSX的问题

The JSX syntax extension is not currently enabled

方法一在vite.config 里配置 createVuePlugin({ jsx: true })

方法二：3. .vue文件中带有jsx语法, 则在script标签下增加该标识

.vue(has jsx) => <script lang="jsx">

参考具体解决方法： [www.npmjs.com/package/vit…]

3.webpack 项目转用vite 要将public文件夹里的index.html删除 index.html 文件

在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了

官方文档： vitejs.cn/guide/#inde…

webpack转 vite vite:require-context 第一步： const modulesFiles = require.context('./modules', true, /.js$/) // webpack const modulesFiles = import.meta.globEager("./module/*.js") // vite 第二步：安装 vite-plugin-require-context 解决在vite.config.js配置

import ViteRequireContext from "@originjs/vite-plugin-require-context";
export default {
  plugins: [
    ViteRequireContext(),
    /* options */
  ],
};

第三步：如果直接使用import.meta.glob，会报类型ImportMeta上不存在属性“glob”的错误，需要在tsconfig文件下添加类型定义vite/client

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

5.项目使用vite3运行时报错：Error: Cannot find module 'node:path'，vite3需要node版本大于等于14.18.0，升级node

webpack 升级为 vite踩坑记

Vue2中使用了 JSX的问题