Vue2.7.14、vuecli@5.0.8 升级 vite@4.4.8

 项目背景

Vue2.7.14、vuecli@5.0.8、element-ui@2.15.13、node14.18.3

vite安装

pnpm add vite@4.4.8 -D

入口文件index.html

文件位置修改

将pulic里的index.html移到根目录下

根目录/public/index.html 到 根目录/index.html

文件内容修改

<link rel="icon" href="<%= BASE_URL %>favicon.ico"> #remove
<link rel="icon" href="/favicon.ico"> #add
<script type="module" src="/src/main.js"></script> #add<title>Vue</title> 

 title如果是动态的,可以引入 vite-plugin-html

vite.config.js

import { defineConfig } from 'vite'
//让浏览器支持commonjs语法
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
//配置vue
import vue from '@vitejs/plugin-vue2'
import path from 'path'
//兼容require
import vitePluginRequire from 'vite-plugin-require'
//gzip压缩
import viteCompression from 'vite-plugin-compression'const REPLACEMENT = `${path.resolve(__dirname, './src')}/`export default defineConfig({server: {host: '0.0.0.0',https: false,port: 8080,proxy: {'/web': {// 路径中有 /api 的请求都会走这个代理 , 可以自己定义一个,下面移除即可target: 'https://baidu.com:10011', // 目标代理接口地址,实际跨域要访问的接口,这个地址会替换掉 axios.defaults.baseURLsecure: false,changeOrigin: true, // 开启代理,在本地创建一个虚拟服务端ws: true //,       // 是否启用  websockets;}}},resolve: {alias: {'@utils': `${path.resolve(__dirname, './src/utils')}/`,styles: `${path.resolve(__dirname, './src/styles')}/`,'@assets': `${path.resolve(__dirname, './src/assets')}/`,'@': REPLACEMENT,'@/': REPLACEMENT,'src/': REPLACEMENT,vue: 'vue/dist/vue.esm.js' //解决el-table 生产环境不显示},extensions: ['.vue', '.js', '.jsx', '.mjs', '.ts', '.tsx', '.json', '.css', '.scss']},css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/common.scss";`}}},build: {minify: 'terser',sourcemap: false,// 进行压缩计算brotliSize: false,modulePreload: false,chunkSizeWarningLimit: 1000,target: 'es2015', // 设置目标浏览器的最低版本terserOptions: {compress: {// 打包自动删除consoledrop_console: true,drop_debugger: true},keep_classnames: true},rollupOptions: {output: {// 分包manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString()}}}}},plugins: [vue(), //配置vueviteCommonjs(),vitePluginRequire(), //兼容requireviteCompression({verbose: true, // 输出压缩成功默认即可disable: false, //开启压缩(不禁用),默认即可deleteOriginFile: false, //删除源文件threshold: 1024, //压缩前最小文件大小algorithm: 'gzip', //压缩算法ext: '.gz' // 生成的压缩包后缀})],optimizeDeps: {include: ['vue', 'vuex', 'sass', 'vue-router'],exclude: ['fsevents']}
})

package.json

"scripts": {"dev": "vite","build": "vite build","build-dev": "vite build --mode dev",},

代码优化

为保险起见,上面的东西配置好了之后,本地启动检查没问题,打包放到测试也没问题,接下来开始进行配置优化。

vue.config.js、webpack、vue/cli-service、babel多余的插件和配置开始逐步删除和卸载

删了发现还是正常可以跑的,自己检查没啥问题,就放心发到测试环境交给测试了


vite打包和启动问题汇总

1、The JSX syntax extension is not currently enabled

The esbuild loader for this file is currently set to "js" but it must be set to "jsx"

to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

如果是在.vue文件中带有jsx语法, 则在script标签下增加该标识

//.vue文件
<script lang="jsx">

2、/src/element-variables.scss Error: Can't find stylesheet to import.

// vite.config.js
css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/common.scss";`}}},

3、No matching export in "src/utils/dialogUtils.js" for import "loading"

dialogUtils.js 不存在loading,找到对应的.vue文件删除loading 引入

4、Internal server error: Unexpected token (1:0)  Uncaught ReferenceError: require is not defined

pnpm i @originjs/vite-plugin-commonjs -D
// vite.config.js
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
plugin:[viteCommonjs()
]

5、[vite] Internal server error: Can't find stylesheet to import.

@import '~element-ui/packages/theme-chalk/src/index';

删除 @import '~element-ui/packages/theme-chalk/src/index';

使用 import 'element-ui/lib/theme-chalk/index.css'

6、使用qrcodejs2生成二维码,报错:Cannot read properties of undefined (reading ‘_android‘)

pnpm add qrcodejs2-fix -D
import QRCode from 'qrcodejs2'; //remove
import QRCode from 'qrcodejs2-fix'; //add

7、开发环境el-table无法渲染的问题

一开始插件引入了vite-plugin-vue2 ---> Vue2.7

后移除改成 @vitejs/plugin-vue2 ---> Vue2.7

pnpm add @vitejs/plugin-vue2 -D
//vite.config.js
import vue from '@vitejs/plugin-vue2'plugins: [vue()
]

8、[ERROR] No loader is configured for ".node" files: node_modules/fsevents/fsevents.node

// vite.config.js
optimizeDeps: { exclude: ["fsevents"] },

9、import * as _vite_plugin_require_transform_get_intrinsic_0 from "get-intrinsic";

 var GetIntrinsic = _vite_plugin_require_transform_get_intrinsic_0.default || _vite_plugin_require_transform_get_intri...

import * as vite_plugin_require_transform./_1 from "./";

pnpm add vite-plugin-require-transform -D
// vite.config.js
import requireTransform from 'vite-plugin-require-transform'
requireTransform({fileRegex: /.vue$/})

10、第9个搞完后启动没问题、打包报错

pnpm remove vite-plugin-require-transformpnpm add vite-plugin-require-transform -D
import vitePluginRequire from 'vite-plugin-require';
plugins: [vitePluginRequire()],

11、启动打包到测试环境发现el-table不显示,本地没问题

alias: { vue: 'vue/dist/vue.esm.js' },

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

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

相关文章

【Lua】(一)VSCode 搭建 Lua 开发环境

前言 最近在找工作&#xff0c;基本所有的岗位都会问到 Lua&#xff08;甚至拼 UI 的都要求会 Lua&#xff09;&#xff0c;咱能怎么办呢&#xff0c;咱也只能学啊…… 工欲善其事&#xff0c;必先利其器。第一步&#xff0c;先来把环境配置好吧&#xff01; 当前适用版本&a…

图数据库_Neo4j学习cypher语言_常用函数_关系函数_字符串函数_聚合函数_数据库备份_数据库恢复---Neo4j图数据库工作笔记0008

然后再来看一些常用函数,和字符串函数,这里举个例子,然后其他的 类似 可以看到substring字符串截取函数 可以看到截取成功 聚合函数 这里用了一个count(n) 统计函数,可以看到效果 关系函数,我们用过就是id(r) 可以取出对应的r的id来这样..

学习电工有哪些好处?在哪学习电工?

学习电工有哪些好处&#xff1f;在哪学习电工&#xff1f;学习电工可以做什么&#xff1f;优势有哪些&#xff1f; 学习电工可以做什么&#xff1f;学习电工有哪些好处&#xff1f; 就业去向&#xff1a;可在企业单位从事电气设备的安装、调试、操作、维护等工作&#xff0c;…

面试题--redis篇

一、Redis支持的数据类型&#xff1f; String (字符串) Hash (哈希) List (列表) Set (集合) zset (sorted set&#xff1a;有序集合) 1. String&#xff08;字符串&#xff09; 格式: set key value string 类型是二进制安全的&#xff0c;意思是 redis 的 string 可以包含任…

“保姆级”考研下半年备考时间表

7月-8月 确定考研目标与备考计划 暑假期间是考研复习的关键时期&#xff0c;需要复习的主要内容有&#xff1a;重点关注重要的学科和专业课程&#xff0c;复习相关基础知识和核心概念。制定详细的复习计划并合理安排每天的学习时间&#xff0c;增加真题练习熟悉考试题型和答题技…

【框架类】—MVVM框架

一、MVVM框架有哪些 Vue.jsReact.jsAngular.js 二、对MVVM的认识 1. MVC是什么 全称 Model View Controller, 它采用模型(Model)-视图(View)-控制器(controller)的方法把业务逻辑、数据与界面显示分离 2. MVVM的定义 MVVM是一种软件架构模式&#xff0c;它代表了模型 --视…

聊聊51单片机

目录 1.介绍 2.发展 3.应用领域 4.发展前景 1.介绍 51单片机&#xff08;AT89C51&#xff09;是一种常见的8位微控制器&#xff0c;属于Intel MCS-51系列。它是一种低功耗、高性能的单片机&#xff0c;广泛应用于嵌入式系统中。 51单片机具有很多特点和功能&#xff0c;例如…

26、springboot的自动配置03--核心功能--自定义条件注解及使用

开发自己的自动配置------开发自己的条件注解 ★ 自定义条件注解 好处有两个&#xff1a; 1. 真正掌握Spring boot条件注解的本质。 2. 项目遇到一些特殊的需求时&#xff0c;也可以开发自己的自定义条件注解来解决问题。自定义条件注解&#xff1a; ▲ 所有自定义注解其实都…

mapbox-gl中mvt、pbf 矢量切片 feature id bug

1.版本:mapbox-gl.js 2.13.0,pbf采用 postgis生成 2.调用矢量切片时,采用如下方法查询矢量切片要素,报错 map.on(mousemove, function(e) { var bbox = [ [e.point.x - 5, e.point.y - 5], [e.point…

uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

主要功能实现 完成发生时间选择功能&#xff0c;用户可以通过日期选择器选择事件发生的时间。实现事件类型选择功能&#xff0c;用户可以通过下拉选择框选择事件的类型。添加子养殖场编号输入框&#xff0c;用户可以输入与事件相关的子养殖场编号。完成事件描述输入功能&#…

【Terraform学习】Terraform_count使用(Terraform配置语言学习)

一、简单使用&#xff1a;对于一些需要起多个重复的实例有用 variable “elb_names” {type listdefault ["a", "b", "c"] } resource "aws_iam_user" "lb" {name var.elb_names[count.index]count 3path "/sys…

【MySQL系列】--初识数据库

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

如何使用PHP Smarty模板进行AJAX交互?

首先&#xff0c;我们要明白&#xff0c;AJAX是一种在无需刷新整个页面的情况下&#xff0c;与服务器进行通信的技术。这对于改善用户体验来说&#xff0c;是个大宝贝。而PHP Smarty模板则是PHP的一种模板引擎&#xff0c;它使得设计和开发人员能够更好地分离逻辑和显示。 现在…

[管理与领导-29]:IT基层管理者 - 团队管理 - 马斯洛需求层次在家庭、情侣、朋友、人生、职场中应用

目录 前言&#xff1a; 一、马斯洛需求层次理论 二、马斯洛需求层次理论在家庭中的应用 三、斯洛需求层次在夫妻、情侣之间的应用 四、马斯洛需求层次理论在朋友间的应用 五、马斯洛需求层次理论在人生发展的应用 六、马斯洛需求层次理论在职场中的应用 前言&#xff1a…

消息中间件相关面试题

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱发博客的嗯哼&#xff0c;爱好Java的小菜鸟 &#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&#x1f44d;一下博主哦 &#x1f4dd;社区论坛&#xff1a;希望大家能加入社区共同进步…

Eclipse集成MapStruct

Eclipse集成MapStruct 在Eclipse中添加MapStruct依赖配置Eclipse支持MapStruct①安装 m2e-aptEclipse Marketplace的方式安装Install new software的方式安装&#xff08;JDK8用到&#xff09; ②添加到pom.xml 今天拿到同事其他项目的源码&#xff0c;导入并运行的时候抛出了异…

【二叉树前沿篇】树

【二叉树前沿篇】树 1 树的概念2. 树的相关概念3. 树的表示4. 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 1 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是…

论文笔记:Continuous Trajectory Generation Based on Two-Stage GAN

2023 AAAI 1 intro 1.1 背景 建模人类个体移动模式并生成接近真实的轨迹在许多应用中至关重要 1&#xff09;生成轨迹方法能够为城市规划、流行病传播分析和交通管控等城市假设分析场景提供仿仿真数据支撑2&#xff09;生成轨迹方法也是目前促进轨迹数据开源共享与解决轨迹数…