Vue2 Element Vite2 整合问题解决_path-browserify-程序员宅基地

技术标签： vite  vue  elementui  前端挖坑  

突然想在Vue2 老项目中使用 Vite2，毕竟 Vite2 是那么的快准狠。在这里记录一下过程中遇到的一些问题
项目环境:
Vue: 2.6.11
ElementUI (Admin)
Vue-Cli: 4.5

1. 整合 Vite2

在gayHub 上有大神做了个由 webpack 转换到 vite 的插件 (https://github.com/originjs/webpack-to-vite)，致敬一下，这里就直接用吧
按照官方教程做完后会生成修改若干文件，这是修改的文件记录：
在这里插入图片描述
总结下：

  1. package.json 增加了对 vite 的运行环境插件支持
    在这里插入图片描述
    在这里插入图片描述

  2. 生成 vite 的配置文件 vite.config.js ，项目结构如下
    在这里插入图片描述
    同时会生成一个 index.html 作为启动入口，vite 不再以 public 中的 index.html 作为入口，加入了根目录文件启动的概念
    到这里基本 webpack -> vite 基本转换完成，下面说一下可能会产生的问题

2. 整合 Element UI 的问题

  1. Svg Icon 的整合
    整合 vite 会导致原有 svg 失效，需要安装一个插件支持 vite-plugin-svg-icons
npm install vite-plugin-svg-icons

然后配置 vite.config.js

// ....
import viteSvgIcons from 'vite-plugin-svg-icons'

export default defineConfig({
    
	//...省略其他内容
	
	plugins: [
    // 添加下面插件
    viteSvgIcons({
    
      iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
      symbolId: 'icon-[dir]-[name]'
    })
  ]

})

配置 main.js

import 'vite-plugin-svg-icons/register'

import svgIcon from './components/SvgIcon/index.vue'
Vue.component('svg-icon', svgIcon)

这样就可以愉快的再次用上 SVG 了

  1. Module "path" has been externalized for brower compatibility and cannot be accesed in client code
vue.runtime.esm.js:1897 
      Error: Module "path" has been externalized for browser compatibility and cannot be accessed in client code.
    at Object.get (__vite-browser-external:path?t=1634261733975:3)
    at VueComponent.resolvePath (SidebarItem.vue:90)
    at Proxy.render (SidebarItem.vue?vue&type=template&lang.js:1)
    at VueComponent.Vue2._render (vue.runtime.esm.js:3569)
    at VueComponent.updateComponent (vue.runtime.esm.js:4081)
    at Watcher2.get (vue.runtime.esm.js:4495)
    at new Watcher2 (vue.runtime.esm.js:4484)
    at mountComponent (vue.runtime.esm.js:4088)
    at VueComponent.Vue.$mount (vue.runtime.esm.js:8459)
    at init (vue.runtime.esm.js:3137)

整合 vite 后，path模块会报错，原因是 vite 源码中设定了不允许在客户端代码中访问内置模块代码（参考 issue )

import path from 'path'

解决方法：使用 path-browserify 代替 path 模块，详细内容参考 NPM解释（path-browserify）
然后把上面的 path 引用代码改为下面这样即可

import path from 'path-browserify'
  1. 可能会出现的错误 The pacakage esbuild-window-64 could not be found ...
    顾名思义，直接安装该依赖包即可
npm install esbuild-window-64

完结撒花仅供参考

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32063079/article/details/120769787

智能推荐

凸包问题--动态凸包（平衡树维护）-程序员宅基地

文章浏览阅读3.2k次，点赞5次，收藏9次。前景提要：继承上一张学习的凸包问题，下面我么来总结一下动态凸包的维护问题。一些点已经构成了一个凸包之后，新加入||删除一些新的点的时候，会对原有的凸包产生一些影响，如果每次都重新把所有点都重新计算一遍凸包的话，那将非常耗费时间，以至于必定会WA，因此，我们就学习动态凸包的维护方法。目录前景提要：观察总结凸包的维护平衡树的维护CF-70D-D. Professor's t..._动态凸包

StringUtils里的isEmpty方法和isBlank方法的区别_stringutils.isblank()和isempty的区别-程序员宅基地

文章浏览阅读10w+次，点赞69次，收藏192次。前言我们常说的字符串为空，其实就是一个没有字符的空数组。比如：String a = "";a 就可以称为是一个空字符串。由于 String 在 Java 中底层是通过 char 数组去存储字符串的，所以空字符串对应的 char 数组表现形式为private final char value[] = new char[0];但实际工作中，我们可以需要对字符串进行一些校验，比..._stringutils.isblank()和isempty的区别

十进制转二进制（C++）_c++十进制转二进制-程序员宅基地

文章浏览阅读4.8w次，点赞34次，收藏116次。除二取余法相信大家应该都知道，十进制转k进制的方法常用的就是除k取余的方法，这里针对这个方法，给出了C++的代码。需要注意的是，除二取余的方法，对于余数的选取是从后往前取的，所以在代码中，也要解决这个问题才行。思路分析模仿不停地除2的过程，每次除2之后用 % 取余数i；用 / 作为下一次除2的被除数temp；j初始化为1，每次除了2之后，j= j*10。最终输出的结果result在..._c++十进制转二进制

Python+Selenium自动化-清空输入框、输入内容、点击按钮-程序员宅基地

文章浏览阅读1.1w次，点赞3次，收藏33次。Python+Selenium自动化-清空输入框、输入内容、点击按钮1.输入内容send_keys('valve')：输入内容valve#定位输入框input_box = browser.find_element_by_id('kw')try: #输入内容：selenium input_box.send_keys('sel..._python selenium input 点击

DockerFlie中设置crontab定时任务，以及new crontab file is missing newline before EOF, can‘t install.错误的解决方法-程序员宅基地

文章浏览阅读6.3k次，点赞2次，收藏8次。DockerFlie中设置crontab定时任务new crontab file is missing newline before EOF, can't install.错误的解决方法问题描述：(系统ubuntu)想要在docker容器创建是就自动新建一个crontab定时任务，用于项目打包成docker容器时可以定时在容器中执行一些命令解决方法：首先，在项目目录下创建cro..._new crontab file is missing newline before eof, can't install.

网络驱动发送队列的停止和冻结_netif_stop_subqueue-程序员宅基地

文章浏览阅读2.8k次，点赞4次，收藏20次。内核中的枚举类型netdev_queue_state_t定义了三种情况，包括设备驱动层面的发送队列停止，协议栈层面的发送队列停止以及发送队列的冻结。另外，定义了三个宏表示了三种组合，其中QUEUE_STATE_ANY_XOFF包含驱动和协议栈两个层面的发送队列停止；其它两个定义如下所示，意义直观。enum netdev_queue_state_t { __QUEUE_STATE_DRV_..._netif_stop_subqueue

随便推点

WORD目录三级标题行间距太大 目录标题行间距_word目录三级标题字体间距太大-程序员宅基地

文章浏览阅读3.5w次，点赞12次，收藏5次。以WORD2013为例，目录标题的格式可以在引用-目录-自定义目录里面修改如下图在弹出的对话框中点修改，又出现一个小对话框如下图小对话框中的目录1,2,3.....即对应标题1,2,3....以标题3为例，选中目录三点修改在弹出的对话框中选中格式段落如下在里面根据自己的需求或者论文规范设置包括缩进、间距、行距。如果设置完成后目录三级标题行间距还是..._word目录三级标题字体间距太大

基于NDT的前端里程计代码解析_ndt激光里程计模块源码解读-程序员宅基地

文章浏览阅读2.3k次，点赞11次，收藏58次。本文主要对Lidar_Localization文件中的三个源文件，front_end_node.cpp、front_end.h/cpp进行详细代码解读。前端激光雷达点云里程计主要分为：点云下采样滤波、点云匹配、位姿估计、关键帧选取等步骤。具体流程为：1）第一帧点云数据设置为地图2）提取关键帧点云，拼接成地图，保证稀疏点云数据。3）除了全局地图，还需要在当前帧附近形成滑动窗局部地图，减小计算..._ndt激光里程计模块源码解读

python+scrapy+selenium爬虫_info: scrapy 2.8.0 started (bot: sci_baike_seleniu-程序员宅基地

文章浏览阅读2.3w次，点赞2次，收藏26次。python配置_info: scrapy 2.8.0 started (bot: sci_baike_selenium)

微信小程序 点击按钮 底部弹出菜单_小程序点击按钮出现菜单栏-程序员宅基地

文章浏览阅读6.1k次，点赞2次，收藏6次。页面：js：效果：_小程序点击按钮出现菜单栏

大数据环境-程序员宅基地

文章浏览阅读123次。大数据环境

PyQt5学习笔记(2) 初识PyQt，Hello Pyqt_labhello.setgeometry(70, 60, size.width(), size.he-程序员宅基地

文章浏览阅读168次。# -*- coding: utf-8 -*-# @Time : 2019/11/24 16:18# @Author : dailinqing# @Email : [email protected]# @File : hello_pyqt.py# @Software: PyCharmdimport sysfrom PyQt5 import QtCore,Qt..._labhello.setgeometry(70, 60, size.width(), size.height())

推荐文章

热门文章

相关标签