百度360必应搜狗淘宝本站头条
分布式事务框架shiro框架java日志框架框架图java框架spring
当前位置：网站首页 > 技术文章 > 正文

php宝塔部署niucloud-admin开源SaaS系统后台框架电脑pc端vue源码

ccwgpt 2024-10-12 02:36 40 浏览 0 评论

大家好啊，我是测评君，欢迎来到web测评，上一期给大家分享niucloud-admin的uniapp多端框架在本地运行与宝塔的部署方式，这一期继续给大家分享，niucloud的web前端nuxt3是怎么在本地运行，并且怎么打包发布上宝塔。

技术架构

  • nuxt3 + nuxt-windicss + vite + typescript + nodejs + vscode
  • cnetos7以上 + 宝塔面板

文字搭建教程

  1. 下载vscode，安装nodejs环境（不懂安装可以去看我以前的环境搭建教程），然后用vscode打开web目录，修改env目录下的接口配置文件（参照视频教程来修改）。然后安装node依赖，执行 npm install
  2. 如果要进行本地开发，可以执行 npm run dev
  3. 本地开发好以后，执行 npm run generate 打包，打包好以后会在网站目录生成dist文件夹。
  4. 需要修改下dist目录编译包中index.html文件，因为编译出的文件是属于单站，所以需要修改路径，可以匹配saas多站。两处代码需要替换：第一处搜索<script 标签，在第一个标签前加第一句代码；如下：
 const match = location.href.match(/\/web\/(\d*)\//);
  1. 第二处搜索baseURL，将整体这一句替换为如下：
 baseURL:match ? `/web/${match[1]}/` : '/web/',
  1. 替换后保存，将dist下的所有文件压缩，运行环境（宝塔）中的niucloud/public/web 中所有文件全部清除掉。
  2. 将生成的编译压缩包上传到运行环境中，解压，以上操作完成，浏览器就可以访问web端。

系统介绍

niucloud-admin前端以及后端采用严格的多语言开发规范，包括前端展示，api接口返回，数据验证，错误返回等全部使用多语言设计规范，使开发者能够真生意义上实现多语言的开发需求。

niucloud-admin结合系统结构特点专门开发了代码生成器，这样开发者根据数据表就可以一键生成基础的业务代码，包括：后台php业务代码以及对应的前端vue代码。

前端采用标准的element-plus，开发者不需要详细了解前端，只需要用标准的element组件就可以。

系统实测截图

视频教程

php宝塔搭建部署niucloudadmin开源SaaS系统框架电脑pc端vue源码

关于资源下载

  1. 网站中的所有源码资源，均不是该源码资源的价格，本身开源源码是不用付费的。这是赞助录制搭建视频教程、收集整理资源、服务器维护的基础开销费用！
  2. 不想付费的朋友可以自行去GitHub或者Gitee搜索相关开源项目，了解其开源协议。再根据视频视频教程来搭建即可。

免责声明

  1. 本站上传的源码，均为平台购买，作者提供，网友推荐，互联网平台整理而来。
  2. 上述源码的知识产权及相关权利归作者及制作公司所有。
  3. 上述源码仅供学习参考及技术交流之用，未经源码的知识产权权利人同意，用户不得进行商业使用。
  4. 上述源码如需商业使用，请自行联系源码知识产权权利人进行授权，否则，我们将积极配合作品知识产权权利人 一起维权。
  5. 上述源码如有侵犯您的知识产权，请您立刻联系我们，我们会在24小时内做删除下架处理。

相关推荐

如何高效实现API接口的自动化测试?

实现API接口的自动化测试是一个多步骤的过程，涉及需求分析、测试用例设计、环境搭建、脚本编写、执行测试、结果分析和持续集成等多个环节。选择合适的工具和框架也是成功的关键。嘿，咱来聊聊实现API接口自动...

总结100+前端优质库，让你成为前端百事通

1年多时间,陆陆续续整理了一些常用且实用的开源项目,方便大家更高效地学习和工作.js相关库js常用工具类「lodash」一个一致性、模块化、高性能的JavaScript实用工具库。「xij...

混合开发到底怎么个混法?（混合开发rn）

引言最近几年混合开发越来越火，从PhoneGap到Cordova到Ionic，再到ReactNative，到Flutter。同时在搜索引擎中诸如IonicVSReactNativeRN和Weex+...

无所不能，将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻，https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...

【直接收藏】前端 VUE 高阶面试题(一)

说说vue动态权限绑定渲染列表（权限列表渲染）首先请求服务器,获取当前用户的权限数据,比如请求this.$http.get("rights/list");获取到权限数据之后,在列表中...

Vue采用虚拟DOM的目的是什么?（vue2 虚拟dom）

虚拟DOM更新其实效率并不像大家想象中的那么高，而且React官方也从来没说过虚拟DOM效率有多高，相反React虚拟DOM的实现也不是所有虚拟DOM产品中最好的。但是通过虚拟D...

什么是 JavaScript?（什么是党的旗帜）

本文首发自「慕课网」，想了解更多IT干货内容，程序员圈内热闻，欢迎关注！作者|慕课网精英讲师然冬JavaScript(JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。(MDN...

Weex在内涵发现页中的工程实践（weex唯客交易所官网）

React-Native和Weex是目前最为火热的两个客户端跨平台解决方案。从去年2016年9月份开始，IES在抖音产品中应用了ReactNative，中途遇到了很多的问题，尤其是长列表的性能问题一...

新恒汇:公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务

证券日报网讯新恒汇7月3日在互动平台回答投资者提问时表示，公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务。具体请关注公司公告和公开披露信息。（编辑王雪儿）...

“移”科普——什么是物联网?（移动设备物联网物联网应用实例）

物联网（InternetofThings，简称IoT）是指通过互联网将物理世界与数字世界相连接，实现物与物之间的智能互联的网络。它是一种新型的信息通信技术，通过传感器、嵌入式系统、网络技术等手段，...

如何自己搭建一个物联网平台?（自建物联网云平台）

自己搭建一个物联网（IoT）平台需要涉及多个关键步骤，包括硬件设备的选择、软件开发、网络通信、安全性设计以及数据管理。以下是搭建物联网平台的基本流程：1.确定物联网平台架构一个完整的物联网平台通常包...

物联网数据接入篇-应用层 Modbus(5)

前四篇文章讲述的是TCP/IP模型中的网络接口层、网络层、传输层、应用层一，这里到了第四层应用层二。由于协议比较多，就分开篇来介绍。这篇讲Modbus协议,后面再讲MQTT协议、CoAP协议、...

乐鑫ESP32-C5全面量产:行业首款双频Wi-Fi 6的RISC-V SoC

IT之家5月2日消息，乐鑫信息科技4月30日宣布，ESP32-C5现已全面进入量产。ESP32-C5宣称是行业首款2.4&5GHz双频Wi-Fi6的RISC-...

Vue Shop Admin:强大而易用的后台管理系统模板

VueShopAdmin是一个基于Vue.js框架的后台管理系统模板。它具有简洁、易用和美观的特点，非常适合开发人员用于快速构建各种类型的管理系统。这个模板使用了最新的技术，如Vue3、V...

基于Prometheus的自动化巡检（prometheus自动发现详解）

!!大家好，我是乔克，一个爱折腾的运维工程，一个睡觉都被自己丑醒的云原生爱好者。作者：乔克公众号：运维开发故事道路千万条，安全第一条。操作不规范，运维两行泪。前言目前，大部分公司都采用Promet...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表