基于 webpack 项目接入 vite 你可能需要注意的点

前言

在之前的 如何优化你的 vue-cli 项目? 一文中介绍基于 webpack 进行的一些优化方法,本文的核心是基于一个 vue2 的项目(也就是上篇文章中的项目)来继续介绍一下如何接入 vite,以及这个过程中需要关注的点。

之前的优化是基于已有的 构建工具 进行的处理,现在相当于直接替换 构建工具,主要用于提升开发时的整体编译速度和效率,本身也是一个优化点。

本篇文章其实是之前的一个规划,但是一直没有落实,现在算是补回来吧!!!

集成 vite

vue 项目如何使用 webpack

如果你观察过你的 vue2 项目中的 package.json 文件,会发现其中和依赖相关的内容竟然没有 webpack,但是直接观察 node_modules 目录中的依赖,还是会发现 webpack 也作为依赖被安装了,那么 vue-cli 创建的项目其中的 webpack 到底在哪呢?

vue-cli-service 命令

其实,我们可以观察一下我们是如何启动项目的,也就是 package.json 文件中的 script 的脚本字段,如:

"scripts": {"dev": "cross-env API_ENV=dev vue-cli-service serve --mode dev","build:test": "cross-env API_ENV=test vue-cli-service build","build:prod": "cross-env API_ENV=prod vue-cli-service build"},

其中的 vue-cli-service 的命令就很显眼了,如果你自己尝试过用 node 开发过一些命令,那么就会知道像这样的命令一定是在某个库中使用 package.jsonbin 属性与对应文件的 Shebang 来实现的。

这里的 vue-cli-service 命令实际上是在 node_modules\@vue\cli-service\package.jsonnode_modules\@vue\cli-service\bin\vue-cli-service.js 中声明和定义的:

在这里插入图片描述

webpack 依赖

仔细观察 @vue/cli-service 相关的 package.json 中的依赖,会发现 webpack 是作为其的依赖:

到这我们就知道了,虽没有显式的直接依赖 webpack,但本质上仍然是基于 webpack 的,感兴趣的可以自行了解 @vue/cli-service 相关源码。

项目集成 vite

知道了 vue2 的项目如何依赖于 webpack,那么接入 vite 时,我们就需要显式的安装依赖,不能像上述一样直接使用.

安装 vite 依赖

通过 npm install vite -D为项目添加相关依赖,或者你可以通过其他方式添加.

创建 vite 配置文件

vue.config.js 的根目录下创建 vite.config.js 用于添加 vite 相关配置.

webpack 中通过 vue-loader 来处理 .vue 文件,而在 vite 不存在 loader 的概念,只有 plugin 的概念,因此需要通过 vite-plugin-vue2 这个插件来处理 .vue 文件

  • 安装对应插件:npm install vite-plugin-vue2 -D
  • vite.config.js 中配置插件:
    import { defineConfig } from 'vite';
    import { createVuePlugin } from 'vite-plugin-vue2';export default defineConfig(() => {return {plugins: [createVuePlugin()],};
    });
    

设置 root 选项(不推荐)

vue2 项目中 webpack 的模板文件默认是 public\index.html,而 vite 默认配置文件是项目根目录下 index.html,因此,需要通过 root 属性重新指定 vite 的模板文件路径,如:

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { resolve } from 'path';export default defineConfig(() => {return {root: resolve(__dirname, './public'),plugins: [createVuePlugin()],};
});

个人不推荐这种方式,建议还是将 index.html 复制到根目录下让 vite 使用这个外部的模板文件,否则页面在加载 main.ts 时会出现 404 的情况.

配置 vite 命令

这个非常简单,直接在 package.json 配置对应的 vite 命令即可,如下:

  "scripts": {"vite": "vite","dev": "cross-env API_ENV=dev vue-cli-service serve --mode dev","build:test": "cross-env API_ENV=test vue-cli-service build","build:prod": "cross-env API_ENV=prod vue-cli-service build"},

基于 ESMoudle 设置 index.html 模板的入口文件

通过 npm run dev启动项目,页面正常访问,如下

此时,通过调试器查看网络请求会发现其实只请求了如下的资源,而关键的 cssjs 资源并没有被加载:

这是因为原本项目中的 index.html 模板中是通过 webpack 基于入口文件进行打包构建后自动注入 cssjs 等关键资源,而在 vite 中模板 index.html 就是入口资源,意味着如果我们需要加载对应的资源,得手动在 index.html 这个模板资源中基于 ES Module 指定入口资源,如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /><meta content="yes" name="apple-mobile-web-app-capable" /><meta content="black" name="apple-mobile-web-app-status-bar-style" /><meta content="telephone=no" name="format-detection" /><link rel="icon" href="./favicon.ico" /><title>PC</title></head><body><noscript><strong>We're sorry but esm-pc-fe doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="../src/main.ts" type="module"></script></body>
</html>

兼容 webpack 和 vite 配置

vite 设置别名

基于以上修改之后,在重新启动,实际上会出现如下错误:

本质原因就是原本我们在 webpack 中设置的 别名 不能被 vite 识别,因此我们需要在 vite 中重新设置一下这些别名:

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { resolve } from 'path';const pathResolve = (pathUrl) => resolve(__dirname, pathUrl);export default defineConfig(() => {return {resolve: {alias: {'@': pathResolve('./src'),'@build': pathResolve('./build'),'@api': pathResolve('./src/api'),'@utils': pathResolve('./src/utils'),'@views': pathResolve('./src/views'),},},plugins: [createVuePlugin()],};
});

vite 处理 css 预处理器

基于以上修改后,重新启动此时可能会报如下错误(正常情况下是不会的):


意思很明确,其实就是没有不能直接处理 .less 文件,不过在 vite 中只需要安装对应的 css 预处理器就可以了,如此时直接 npm install less -D 即可,不需要再额外配置类似 webpack 中的 loader,其实这个错误很少会出现,因为无论你的项目使用什么 css 预处理器,都必须要得先进行安装,意味着在 vite 中可以直接使用.

使用 import 代替 require

vite 中没有 require 而在 webpack 中是可以使用的,这就意味着原本项目中使用的 require 的形式会在 vite 中抛出错误:

image.png

在组件中加载图片

const bgImg = require('@/assets/images/logo/bg.jpeg');
const avatarImg = require('@/assets/images/avatar.png');【转换为如下形式】
import bgImg from '@/assets/images/logo/bg.jpeg';
import avatarImg from '@/assets/images/avatar.png';

加载 js 配置文件

const EnvBaseConf = require('@build/webpack.base.conf.js');【转换为如下形式】
import EnvBaseConf from '@build/webpack.base.conf.js';

使用 import.meta.env 代替 process.env

import.meta 是一个在 ES 模块内部可用的对象,它包含关于模块运行环境的有用信息,可以在这个对象的 env 属性上获取当前的环境信息,因为在 vite 中不在将对应的环境信息挂载到 process.env 上,这就会导致最终取值结果为 undefined.

vite 处理 svg

通常在 webpack 中处理 svg 有三步:

  • 自动加载对应的 svg 文件
    // svg.js
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)
    
  • 在入口文件 main.ts 中引入 svg.js
  • vue.config.js 中为 *.svg 文件配置对应的 loader
    const svgRule = config.module.rule('svg');
    // 清除已有的所有 loader
    // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后
    svgRule.uses.clear();
    // 添加要替换的 loader
    svgRule.use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]',
    });
    

vite 中只需要配置 vite-plugin-svg-icons

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import viteSvgIcons from 'vite-plugin-svg-icons';
import { resolve } from 'path';const pathResolve = (pathUrl) => resolve(process.cwd(), pathUrl);export default defineConfig(() => {return {resolve: {alias: {'@': pathResolve('./src'),'@build': pathResolve('./build'),'@api': pathResolve('./src/api'),'@utils': pathResolve('./src/utils'),'@views': pathResolve('./src/views'),},},plugins: [createVuePlugin(),viteSvgIcons({iconDirs: [pathResolve('/src/assets/icons/svg')], // 指定要缓存的图标文件夹symbolId: 'icon-[name]', // 执行 icon-name 的格式}),],};
});

区分 webpack 和 vite 环境

有些配置相关的内容还是没有办法很好的复用,此时可以通过访问 import.meta.env 值的方式,判断当前环境是否属于 vite 环境,以便于处理一些 webpackvite 本身不兼容的地方,比如在加载文件资源时 webpack 中需要使用 require 加载,vite 中需要通过 import 加载等,当然这个可以通过 import(xxx) 的方式来加载是可以兼容两者的,这里只是提出个引子.

最后

以上就是大概需要注意的一些内容,相信有了上述的处理经验,即使你遇到其他问题也可以很快的解决,实际上内容不算多、也不算难,其实只要一步步根据出现的问题逐个解决即可.

简单看一下接入 vite 前后的整体编译速度:

在这里插入图片描述

注意
本地服务启动方面 vite 相比于 webpack 来说速度很快,其实它的快其实是基于 esbuild 实现的 预构建,还不算是真正做编译,只有页面真正初始化加载时,才会对当前页面需要访问的文件资源进行 按需编译,所以如果要真正比对其实还得考虑它们 首屏加载的速度,不过 vite 的按需编译也会使得它整体速度会更快一些.

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python工具箱系列(五十七)

图像分割与人脸识别 众所周知图像是由若干有意义的像素组成的&#xff0c;图像分割作为计算机视觉的基础&#xff0c;对具有现有目标和较精确边界的图像进行分割&#xff0c;实现在图像像素级别上的分类任务。图像分割可分为语义分割和实例分割两类&#xff0c;区别如下&#x…

日志代码编写

&#x1f30e;日志代码编写 文章目录&#xff1a; 日志代码编写 了解日志 日志编写       日志等级       获取时间信息       获取文件名行号及处理可变参数列表       以宏的形式传参       日志加锁       日志消息输出方式 完整代码 …

告别繁琐统计,一键掌握微信数据

微信数据管理的挑战在数字时代&#xff0c;微信已成为我们日常沟通和商业活动的重要工具。然而&#xff0c;随着微信号数量的增加&#xff0c;手动统计每个账号的数据变得越来越繁琐。从好友数量到会话记录&#xff0c;再到转账和红包&#xff0c;每一项都需要耗费大量的时间和…

【第几小】

题目 代码 //分块可以AC 20个点的块长&#xff0c; sqrt(n)*5#include<bits/stdc.h> using namespace std;int main(){ios::sync_with_stdio(0),cin.tie(0),cout.tie(0);int n; cin>>n;vector<int> a(n1,0);//分块int len sqrt(n)*5; //块长int k (n%len…

详细分析Pytorch中的transpose基本知识(附Demo)| 对比 permute

目录 前言1. 基本知识2. Demo 前言 原先的permute推荐阅读&#xff1a;详细分析Pytorch中的permute基本知识&#xff08;附Demo&#xff09; 1. 基本知识 transpose 是 PyTorch 中用于交换张量维度的函数&#xff0c;特别是用于二维张量&#xff08;矩阵&#xff09;的转置操…

使用Docker构建和部署微服务

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 [TOC] Docker 是一个开源的容器化平台&#xff0c;可以帮助开发者轻松构建、打包和部署应用程序。本文将详细介绍如何使用 Dock…

Python+Appium+Pytest+Allure自动化测试框架-代码篇

文章目录 自动化测试框架工程目录示例测试代码示例结果查看allurepytest编写pytest测试样例的规则pytest conftest.py向测试函数传参 appium启动appium服务代码端通过端口与appium服务通信对设备进行操作在pytest测试用例中调用appium 更多功能 PythonAppiumPytestAllure自动化…

Elasticsearch Interval 查询:为什么它们是真正的位置查询,以及如何从 Span 转换

作者&#xff1a;来自 Elastic Mayya Sharipova 解释 span 查询如何成为真正的位置查询以及如何从 span 查询过渡到它们。 长期以来&#xff0c;Span 查询一直是有序和邻近搜索的工具。这些查询对于特定领域&#xff08;例如法律或专利搜索&#xff09;尤其有用。但相对较新的 …

IoTDB时序数据库使用

简介 Apache IoTDB 是一款低成本、高性能的物联网原生时序数据库。它可以解决企业组建物联网大数据平台管理时序数据时所遇到的应用场景复杂、数据体量大、采样频率高、数据乱序多、数据处理耗时长、分析需求多样、存储与运维成本高等多种问题。 IoTDB官网 1. 连接数据库 官方…

河北冠益荣信科技公司洞庭变电站工程低压备自投装置的应用

摘 要&#xff1a;随着电力需求增长&#xff0c;供电可靠性变得至关重要&#xff0c;许多系统已有多回路供电。备用电源自动投入装置能提升供电可靠性&#xff0c;它能在主电源故障时迅速切换到备用电源。本文介绍的AM5-DB低压备自投装置&#xff0c;为洞庭变电站提供多种供电方…

STM32实现IAP串口升级含源码(HAL库)

文章目录 一. 关于IAP升级二. IAP升级的分类二. IAP升级原理2.1 正常启动流程2.2 IAP启动流程 三. Ymodem协议3.1 传输过程3.2 帧命令3.3 起始帧3.4 数据帧3.5 结束帧 四. IAP代码实现4.1 Boot 程序4.2 App 程序4.3 展示效果 五. Demo源码六. Qt 上位机 一. 关于IAP升级 IAP&am…

【Hello World 】

【Hello World 】! C语言实现C实现Java实现Python实现 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 几乎每一个程序员都是从Hello World!开始自己的程序人生&#xff0c;作为一个初学编程的小朋友&#xff0c;也需要先编程来输出Hello Wo…

LabVIEW程序员赚钱不仅限于上班

LabVIEW程序员拥有多种途径来实现财富增值&#xff0c;而不仅仅局限于传统的全职工作。以下是一些他们可以利用自身技能和专业知识实现更高财务收益的方法&#xff1a; 1. 专注领域的自由职业与合同工作 制造、科研、医疗技术等行业都需要LabVIEW的专业知识。通过自由职业&…

vue3项目中el-tooltip实现内容溢出时再显示,并设置tip的最大宽度

html代码 <el-tooltip :disabled"!textIsOverflow" placement"top"><template #content><div class"tooltip-div">tootip的内容</div></template><div class"textOverflow" ref"textRef"…

文案语音图片视频管理分析系统-视频矩阵

文案语音图片视频管理分析系统-视频矩阵 1.产品介绍 产品介绍方案 产品名称&#xff1a; 智驭视频矩阵深度分析系统&#xff08;SmartVMatrix&#xff09; 主要功能&#xff1a; 深度学习驱动的视频内容分析多源视频整合与智能分类高效视频检索与编辑实时视频监控与异常预警…

HTML 基础标签——分组标签 <div>、<span> 和基础语义容器

文章目录 1. `<div>` 标签特点用途示例2. `<span>` 标签特点用途示例3. `<fieldset>` 标签特点用途示例4. `<section>` 标签特点用途示例5. `<article>` 标签特点用途示例总结HTML中的分组(容器)标签用于结构化内容,将页面元素组织成逻辑区域…

安防被动红外和主动红外

被动红外探测器是依靠被动的吸收热能动物活动时身体散发出的红外热能进行报警的&#xff0c;也称热释红外探头&#xff0c;其探测器本身是不会发射红外线的。 被动红外探测器中有2个关键性元件&#xff0c;一个是菲涅尔透镜&#xff0c;另一个是热释电传感器。**自然界中任何高…

Windows下将网盘挂载到本地使用(Docker+AList+RaiDrive)

文章目录 安装安装Docker安装Alist安装RaiDrive 安装 安装Docker Windows下安装Docker网上有很多教程&#xff0c;也可以参考我写的博客链接 3.1章节 安装Alist 官网 “切换中文”并找到“使用指南” ”安装“–>"使用Docker” 打开cmd执行如下命令启动容器 do…

C语言 | Leetcode C语言题解之第519题随机翻转矩阵

题目&#xff1a; 题解&#xff1a; typedef struct {unsigned long long val;UT_hash_handle hh; } Hash;typedef struct {Hash *hash;int n_rows;int n_cols; } Solution, SL;Solution* solutionCreate(int n_rows, int n_cols) {SL *obj malloc(sizeof(SL));obj->hash …

C++之多态(上)

C之多态 多态的概念 多态(polymorphism)的概念&#xff1a;通俗来说&#xff0c;就是多种形态。多态分为编译时多态(静态多态)和运⾏时多 态(动态多态)&#xff0c;这⾥我们重点讲运⾏时多态&#xff0c;编译时多态(静态多态)和运⾏时多态(动态多态)。编译时 多态(静态多态)主…