vue2将webpack改为vite

embedded/2024/11/17 18:56:03/

1、修改环境变量:之前vue-cli使用的是VUE_APP开头的环境变量,vite使用的是VITE_开头的环境变量,所以需要修改环境变量。

2、修改环境变量引用:vue-cli使用的是process.env而vite使用的是import.meta.env。

3、index.html文件改动:

    1、vite默认会从根目录找index.html文件,所以确保index.html在根目录下。

    2、如果有使用HtmlWebpackPlugin插件,在vite中需要使用vite-plugin-html插件。

4、修改page.json文件:

    1、运行命令"dev": "vite", 打包命令"build": "vite build"

    2、删除core.js包、删除 "@vue/cli-*"相关包、删除sass-loader包、删除babel-*相关包

    3、安装 "@vitejs/plugin-vue": "^1.6.1"、"vite": "^2.9.18"、"vite-plugin-vue2": "^1.9.0",

5、删除魔法注解:/* webpackChunkName: "XXXX" */,vite中魔法注释不生效,也可以不删除

6、新增vite.config.js文件:基础配置:

import { defineConfig } from 'vite'
import { createVuePlugin as vue } from "vite-plugin-vue2" // 重要-vue2需要使用const path = require("path")
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve(__dirname, "./src"),},extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],},esbuild: {// 此配置是为了在vue中使用jsxjsxFactory: "h",jsxFragment: "Fragment",jsxInject: "import { h } from 'vue';",}
})

7、删除babel.config.js

8、jsx使用需要在script标签中添加lang="jsx",如:<script lang="jsx">

9、批量引入文件:webpack中使用require.context()批量引入文件,vite中使用import.meta.glob()批量引入文件。

10、全局scss文件:在vite.config.js中配置scss全局样式,且不能再在vue文件中使用import引入,还没找到怎么在template中使用全局样式的方法,如:   

css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: `@import '文件路径';@import '文件路径';`}}
}

11、将使用的node_modules里使用的包单独打包出来: 

build: {"minify":false,"rollupOptions":{"output":{"manualChunks":(id)=>{if(id.includes('node_modules')){return 'vendor';}}}}}

参考文档:https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/


http://www.ppmy.cn/embedded/138314.html

相关文章

Linux驱动开发第2步_“物理内存”和“虚拟内存”的映射

“新字符设备的GPIO驱动”和“设备树下的GPIO驱动”都要用到寄存器地址&#xff0c;使用“物理内存”和“虚拟内存”映射时&#xff0c;非常不方便&#xff0c;而pinctrl和gpio子系统的GPIO驱动&#xff0c;非常简化。因此&#xff0c;要重点学习pinctrl和gpio子系统下的GPIO驱…

冗余连接2 hard题 代随C#写法

此题在卡码网109与力扣685题亦有记载 有一说一C#写法我没咋搞懂 就看明白了思路 这里贴一个答案待后续我醒悟了再来看罢 难就难在对整体数据结构classUnion&#xff08;并查集&#xff09;的理解不熟并且 对于输入输出这个迭代过程理解上也比较吃力 109. 冗余连接II 题…

DevOps工程技术价值流:加速业务价值流的落地实践与深度赋能

DevOps的兴起&#xff0c;得益于敏捷软件开发的普及与IT基础设施代码化管理的革新。敏捷宣言虽已解决了研发流程中的诸多挑战&#xff0c;但代码开发仅是漫长价值链的一环&#xff0c;开发前后的诸多问题仍亟待解决。与此同时&#xff0c;虚拟化和云计算技术的飞跃&#xff0c;…

Mysql的InnoDB存储引擎中的锁机制

我们将进一步深入到InnoDB存储引擎中的锁机制&#xff0c;包括其内部实现细节、锁的类型、锁的算法、死锁处理以及一些高级特性和最佳实践。 锁的存储结构 Lock Struct&#xff1a;InnoDB中的锁结构体Lock_struct包含以下字段&#xff1a; type_mode&#xff1a;锁的类型和模式…

【Python模拟websocket登陆-拆包封包】

Python模拟websocket登陆-拆包封包 解析一个网站获取wss原始数据拆包wss数据封包wss数据发送接收websocket的常驻后台脚本总结 解析一个网站 这里所用的网站是我一个内测的网站&#xff0c;主要手段是chrome devtools&#xff0c;用得很多&#xff0c;但我玩的不深&#xff0c…

数学分组求偶数和

问题描述 小M面对一组从 1 到 9 的数字&#xff0c;这些数字被分成多个小组&#xff0c;并从每个小组中选择一个数字组成一个新的数。目标是使得这个新数的各位数字之和为偶数。任务是计算出有多少种不同的分组和选择方法可以达到这一目标。 numbers: 一个由多个整数字符串组…

C++(Qt)软件调试---内存泄漏分析工具MTuner (25)

C(Qt)软件调试—内存泄漏分析工具MTuner &#xff08;25&#xff09; 文章目录 C(Qt)软件调试---内存泄漏分析工具MTuner &#xff08;25&#xff09;[toc]1、概述&#x1f41c;2、下载MTuner&#x1fab2;3、使用MTuner分析qt程序内存泄漏&#x1f9a7;4、相关地址&#x1f41…

在移动硬盘中创建vue项目 报错

如图所示&#xff0c;在U盘或者移动硬盘当中 创建vue项目&#xff0c;报错 如图所示&#xff0c; 这个问题与 Git 的安全设置有关&#xff0c;尤其是在跨用户或跨文件系统的环境下&#xff08;例如&#xff0c;移动硬盘或不同账户&#xff09;。Git 检测到当前项目的文件夹 的…