问题记录:vue项目升级

升级 webpack5

新建的项目升级脚手架vue-cli到5.X版本,创建后的项就是使用的webpack5

npm install -g @vue/cli@next
OR
yarn global add @vue/cli@next

升级后可以通过下面的命令查看:

vue -V(大写的V)

创建脚手架的时候会报错报错,内容如下:

~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode

解决办法找到本地用户的目录C盘 找到一个.vuerc 的文件删掉就可以了

 旧项目升级webpack5

在项目根目录执行下面的命令:

vue upgrade --next

如图所是所有相关的脚手架的包都会升级到5.X版本,如图所示:

 相关依赖升级后启动打包的时候会抱一些错误:

错误1、

ERROR  ValidationError: Progress Plugin Invalid Options

        options should NOT have additional properties
        options should NOT have additional properties
        options should NOT have additional properties
        options should pass "instanceof" keyword validation
        options should match exactly one schema in oneOf

该错误是由于vue-cli5新添加依赖"register-service-worker"导致的,安装这个依赖并且需要根目录添加文件registerServiceWorker.js,内容如下:

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

错误2

ERROR in ./src/views/test/index.vue
Module build failed (from ./node_modules/@vue/vue-loader-v15/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined

vue-template-compiler版本低导致的,升级到最新就行了

错误3

ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
         - options has an unknown property 'overlay'. These properties are valid:
ddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

配置中的属性配置错误,没啥用注释了,或者查看一下官网更换新的配置。上面中报错的这个属性应该配置成如下的代码:

devServer: {
    client: {
      reconnect: false,
    },
  },
//多了一层client

错误4

升级后相应的使用到了loader,plugin等也需要升级根据错误提示哪个报错升级哪个(还不如新建一个脚手架往里拽)

还有一种方式升级webpack5就是将项目不当作一个vue项目去掉所有的vue-cli相关的依赖包,然后通过安装和运行webpack以及各种相关的loader,plugin等对项目进行打包,这个还没折腾出来。

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: Vue3和Spring Boot是两种不同的技术,用于前后端分离项目的开发。 Vue3是一种现代化的JavaScript框架,用于构建用户界面。它提供了诸多强大的工具和功能,使开发人员能够快速构建响应式的单页面应用。Vue3具有更高的性能和更好的可维护性,同时还引入了一些新的特性,如Composition API和Teleport等,使开发更加便捷。 Spring Boot是一种用于构建Java后端应用的框架。它提供了一套简化的开发流程,可以快速搭建和配置项目,并提供了丰富的功能来处理数据、安全性和其他常见的后端需求。Spring Boot采用了约定优于配置的原则,使得开发人员可以专注于业务逻辑的实现。 在前后端分离项目中,可以通过Vue3来开发前端应用,通过发送HTTP请求来与后端进行通信。后端使用Spring Boot来处理这些请求,处理业务逻辑,并将结果返回给前端。前后端的通信可以使用JSON等数据格式进行交互。 前后端分离项目的优点是可以实现前后端职责的解耦,提高开发效率和可维护性。前端可以专注于用户界面的设计和交互逻辑,后端可以专注于业务逻辑的处理和数据的存储。同时,前后端可以同时进行开发,加快项目的上线速度。 总结来说,使用Vue3和Spring Boot进行前后端分离项目的开发,可以使开发人员能够充分发挥各自的优势,提高开发效率和项目的可维护性。同时,前后端分离项目也能够更好地适应现代化的软件开发需求,提供更好的用户体验和性能。 ### 回答2: Vue3 Spring Boot前后端分离项目是将前端和后端的开发分为两个独立的团队,分别负责开发前端和后端模块,最后通过接口进行数据的交互和通信。 Vue3是一种新一代的JavaScript框架,用于构建用户界面。它建立在Vue.js的基础上,在性能和开发体验上进行了改进。Vue3使用了Composition API,提供了更灵活、可重用和可组合的代码结构,可以更好地管理组件逻辑。 Spring Boot是一个基于Java的开发框架,用于构建独立的、可扩展的和生产就绪的后端应用程序。它大大简化了Java后端的开发流程,提供了自动化配置和快速开发的特性。 在Vue3 Spring Boot前后端分离项目中,前端团队使用Vue3构建用户界面,实现展示数据和交互逻辑。后端团队使用Spring Boot开发RESTful接口,处理前端的请求并进行数据处理和存储。前后端通过接口进行通信,前端发送请求给后端,后端返回相应的数据给前端。 前后端分离项目的好处是可以实现前后端的解耦,各自团队可以专注于自己的领域,提高开发效率和协作效果。同时,前后端分离项目也可以使得前端和后端可以独立部署和升级,提高了系统的可维护性和扩展性。 总之,Vue3 Spring Boot前后端分离项目通过利用Vue3和Spring Boot的优势,实现前后端独立开发和交互,提供了更好的开发体验和协作效果。 ### 回答3: Vue3 是一种流行的前端开发框架,而Spring Boot 是一种常用的后端开发框架。在前后端分离的项目中使用 Vue3 和 Spring Boot 可以实现前后端分离的架构。 在这种架构中,前端和后端是独立开发和部署的,彼此通过 RESTful API 进行通信。前端使用 Vue3 来构建用户界面,处理用户交互,并向后端发送请求。后端使用 Spring Boot 来处理请求,执行业务逻辑,并返回相应的数据给前端Vue3 提供了强大的数据绑定和组件化的功能,可以方便地构建用户界面,并实现丰富的用户交互。它还提供了一些有用的工具和插件,例如 Vue Router 和 Vuex,用于路由管理和状态管理。通过使用这些功能,我们可以更好地组织和管理前端代码。 Spring Boot 是一个快速开发和部署的框架,它提供了很多现成的功能和插件,使后端开发更加高效。使用 Spring Boot,我们可以很方便地定义 RESTful API,处理请求和返回响应。它还提供了许多有用的功能,例如数据库访问、安全认证和日志记录。 在 Vue3 和 Spring Boot 的配合下,我们可以实现前后端分离的开发模式,提高开发效率和代码质量。前端和后端开发人员可以并行工作,互不干扰。同时,前后端分离的架构也能为项目带来更好的可维护性和可扩展性。因此,Vue3 和 Spring Boot 的组合是一个理想的选择,用于构建现代化的前后端分离项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值