一文讲清Vue项目几个比较高频的问题,强烈建议后端开发大佬收藏

简介: 一文讲清Vue项目几个比较高频的问题,强烈建议后端开发大佬收藏

"自在的快乐便是佛家所说的那种境界,“要眠即眠,要坐即坐,如果一个人茶饭不宁,百种需求,千般计较,自然谈不上是真正的放下,又如何感受快乐?真正在的自由是建立于真正的放下之上,一切皆空即是一切皆有”"

--出自《断舍离》

前言

一些用到 VueAdminWork系列框架的大佬问的比较多的问题就是:我的项目怎么跑不起来,控制台报错。好不容易跑起来了,又不知道该如何打包上线等等一系列问题。

本来我觉得这些问题不是什么大的问题,也没太在意,但是问的人还不少,尤其是一些做后端开发的可能还不太清楚基于Vue下的整体的项目流程,下面小编就给大家说一下这些问题。


基于Vue开发的整体流程

在现在前端开发中基于Vue开发的环境和原来的前后混杂在一起的开发模式还是差别挺大的,可以通过 cdn引入Vue的方式,也可以通过Vue cli的方式。这里以 vue cli的方式来介绍, 大体的流程如下:

   1. 安装 vue cli

   2. 通过 cli 创建 vue 项目

   3. 开发,编写代码

   4. 调试解决bug

   5. 准备打包上线

以上便是基于VueCli开发的基本流程,当然如果您使用的是Vite打包工具那在创建或者打包的时候还有点点差别的。

因为VueAdminWork大部分版本是基于Vite开发的,所以我们着重讲解一下在Vite下的配置问题。


项目运行不起来

当拿到VueAdminWork源码之后,首先是要把项目运行起来,但是很多大佬运行的时候就报错,如下图大部分错误像是这种的主要是因为 node 的环境版本太低了

4edc953e2c684bbe819ffa954c899c08.png因为 vite 对node的要求比较高,所以对低版本的node可能兼容性不那么好,

我们建议 node的版本是:v16.13.1 稳定版。

查看 node的版本方式

node -v

如果不是 16.13.1的建议升级到此版本


如何把项目部署到服务器

当我们把项目都开发完成之后,要把项目放到服务器准备上线的时候,就不知道该怎么做了。

这个时候要用到以下命令了:

npm run build

当我们执行完这行命令之后,就可以在项目的根目录下面生成一个名叫 dist 的目录(默认是此目录),里面就放着vite为我生成好的代码。这个时候,就可以把里面的文件上传到服务器上的某个目录下,并且用 nginx 服务器指向这个目录。这里还是建议使用 nginx 做为服务器,tomcat 也可以,不过还是建议 nginx。配置好域名之后,就可以准备上线了。


怎么修改默认的打包目录dist名称

如果您不希望vite帮我们生成的默认输入目录名为dist,那么就就是自己修改 vite.config.ts 或者  vite.config.js 文件了。

当我们使用vite 创建好一个项目的时候,都会生成这个配置文件。

简单看一下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [
    vue(),
  ],
  server: {
    open: true,
  },
})

我们再添加一个 `build`的属性如下:

build: {
  outDir: 'my_dist',
},

my_dist 就是我们想要生成输出的目录,可以随便指定,但要符合目录的命名规范。


这个组件怎么使用,为什么我的出不来效果

VueAdminWork系列框架的组件库都是采用知名开源的组件库如:ElementUI、Antd、NaiveUI等,所以大家可以完全放心使用。

但是对于一些组件库带的组件使用不清楚,首先要去官网查文档,认真阅读一下该组件的使用说明,如果再解决不了,就通过微信群进行探讨。

如果您是授权客户,就直接找到专属的客服解决


写在最后

这里只列举了一些比较常见的问题,还有一些问题,只是个别人出现的情况,这里就不一一列举了,如果您有问题欢迎通过微信群随时找我们。

相关文章
|
7月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
696 1
|
5月前
|
人工智能 Java API
后端开发必看:零代码实现存量服务改造成MCP服务
本文介绍如何通过 **Nacos** 和 **Higress** 实现存量 Spring Boot 服务的零代码改造,使其支持 MCP 协议,供 AI Agent 调用。全程无需修改业务代码,仅通过配置完成服务注册、协议转换与工具映射,显著降低改造成本,提升服务的可集成性与智能化能力。
1557 1
|
5月前
|
前端开发 Java 数据库连接
后端开发中的错误处理实践:原则与实战
在后端开发中,错误处理是保障系统稳定性的关键。本文介绍了错误分类、响应设计、统一处理机制及日志追踪等实践方法,帮助开发者提升系统的可维护性与排障效率,做到防患于未然。
|
9月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
514 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
464 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
7月前
|
Java 关系型数据库 MySQL
在Linux平台上进行JDK、Tomcat、MySQL的安装并部署后端项目
现在,你可以通过访问http://Your_IP:Tomcat_Port/Your_Project访问你的项目了。如果一切顺利,你将看到那绚烂的胜利之光照耀在你的项目之上!
419 41
|
8月前
|
前端开发 JavaScript 关系型数据库
2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡
2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡
609 5
2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡
|
6月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
295 0
|
8月前
|
人工智能 小程序 NoSQL
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
|
10月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
551 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战