前端打包环境配置步骤

获取node安装包并解压

  • 获取node安装包

    wget https://npmmirror.com/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz

  • 解压

    tar -xvf node-v16.14.0-linux-x64.tar.xz

    创建软链接

  • sudo ln -s 此文件夹的绝对路径/bin/node /usr/local/bin/node,具体执行如下:

    sudo ln -s ~/npm/node-v16.14.0-linux-x64/bin/node /usr/local/bin/node


    验证是否正常

    node -v

  • sudo ln -s 此文件夹的绝对路径/bin/npm /usr/local/bin/npm

    sudo ln -s ~/npm/node-v16.14.0-linux-x64/bin/npm /usr/local/bin/npm


    验证是否正常

    npm -v

将npm换为cnpm,淘宝本地源,并创建软链接(时间较长)

  • 将npm换为cnpm 执行命令:

    npm install cnpm -g --registry=https://registry.npm.taobao.org

  • 创建软链接:
    sudo ln -s 此文件夹的绝对路径/bin/cnpm /usr/local/bin/cnpm 详情如下:

    sudo ln -s ~/npm/node-v16.14.0-linux-x64/bin/cnpm /usr/local/bin/cnpm

安装vue

  • 执行命令安装VUE 
    cnpm install vue@2.6.10

安装yarn

  • 添加GPG key

    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add


  • 添加源

    echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

  • 执行安装命令

    sudo apt update && sudo apt install --no-install-recommends yarn


  • 运行

    yarn -v

    测试是否成功

(若yarn不成功) 配置环境变量,若成功跳过此步

  • 打开环境变量文件
    vi ~/.bashrc

  • 最后一行添加
    export PATH="$PATH:`yarn global bin`"
    source ~/.bashrc

进入前端项目打包

备注说明:如果首次操作需要先将前端项目下载到服务器指定路径,例如:/home/narada/ems_frontend

  • 进入前端目录 

    cd ems_frontend/

  • 执行

    yarn

  • 执行打包命令

    cnpm run build:prod 

     yarn run build:prod

打包成功,拷贝目录

打包成功后,将此目录下的dist文件夹拷贝到ems/www中,若无www文件夹则先新建www文件夹后拷贝

cp -rf dist /home/narada/ems/www/

确认打包的前端内容正常打包到对应的目录下如图:

访问测试环境地址验证是否成功,如果能正常访问即打包成功~

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

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

相关文章

彻底搞懂零拷贝技术( DMA、PageCache)

DMA 直接内存访问(Direct Memory Access) 什么是DMA? 在进行数据传输的时候,数据搬运的工作全部交给 DMA 控制器,而 CPU 不再参与,可以去干别的事情。 传统I/O 在没有 DMA 技术前,全程数据…

AIGC之Image2Video(一)| Animate Anyone:从静态图像生成动态视频,可将任意图像角色动画化

近日,阿里发布了Animate Anyone,只需一张人物照片,结合骨骼动画,就能生成人体动画视频。 项目地址:https://humanaigc.github.io/animate-anyone/ 论文地址:https://arxiv.org/pdf/2311.17117.pdf Github…

YOLOv8 YoLov8l 模型输出及水果识别

🍨 本文为[🔗365天深度学习训练营学习记录博客 🍦 参考文章:365天深度学习训练营 🍖 原作者:[K同学啊 | 接辅导、项目定制] 🚀 文章来源:[K同学的学习圈子](https://www.yuque.com/m…

Android app性能优化指南

Android应用性能优化指南 提高应用程序的性能以实现更流畅的用户体验和更高的可见度。 性能在任何应用程序的成功中发挥着重要的作用。为用户提供流畅无缝的体验应该是开发人员的重点。 应用程序大小 在用户开始使用我们的应用程序之前,他们需要下载应用程序并将…

TypeScript入门实战笔记 -- 开篇 为什么要选择 TypeScript ?

typescript 在线编辑器http://typescript.p2hp.com/play?#code/JYOwLgpgTgZghgYwgAgJIFUDO1Uhge2QG8AoZc5YAEwC5kQBXAWwCNoBuMikOJiOzGCigA5pwrI4ANzhg4UAPwChozgF8SmmAxAIwwfCGRYcefAAoADlHyXMdDNii4CASmJdyCQ5nwAbCAA6P3wRKxs7ABpkAHJrW0wY1xINEhNnM3MiSlpkAEZonj46GIBrROQ1…

C/C++之输入输出

文章目录 一.C语言的输入输出1.printfi. 输出整数ii. 浮点数iii.字符 & 字符串 2.scanfi.整数ii.浮点数iii. 字符 & 字符串 3.特殊用法i. * 的应用ii. %n 的应用iii. %[] 的应用 二.C中的输入输出1.couti. 缓冲区(buffer)ii. cout之格式化输出 2…

区块链optimism主网节点搭建

文章目录 官方参考资料编译环境搭建编译Optimism Monorepo编译op-geth 执行下载数据快照生成op-geth和op-node通信密钥op-geth执行脚本 op-node执行脚本 启动日志op-gethop-node 本文是按照官方参考资料基于源码的方式成功搭建optimism主网节点。 官方参考资料 源码&#xff1…

【设计模式-4.4】行为型——模板方法模式

说明:本文介绍设计模式中行为型设计模式中的,模板方法模式; 生存 模版方法模式是行为型设计模式,关注于对象的行为。在《秒懂设计模式》(刘韬 著)中举了一个例子,例如哺乳动物的生存技能&…

1688API接口系列,商品详情数据丨搜索商品列表丨商家订单类丨1688开放平台接口使用方案

1688商品详情接口是指1688平台提供的API接口,用于获取商品详情信息。通过该接口,您可以获取到商品的详细信息,包括商品标题、价格、库存、描述、图片等。 要使用1688商品详情接口,您需要先申请1688的API权限,并获取ac…

【开源】基于Vue+SpringBoot的河南软件客服系统

文末获取源码,项目编号: S 067 。 \color{red}{文末获取源码,项目编号:S067。} 文末获取源码,项目编号:S067。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统管理人员2.2 业务操作人员 三、…

uniapp 云打包 生成安卓证书文件

现在使用uniapp来开发小程序,H5,APP越来越多了,目前开发了一款APP,使用的也是uniapp。在此记录下用uniapp开发app云打包时约到的一些问题吧。 前因是我司安卓同学休产假,像云打包时需要的证书文件只能自己动手来搞。看…

Avaya Aura Device Services 任意文件上传漏洞复现

0x01 产品简介 Avaya Aura Device Services是美国Avaya公司的一个应用软件。提供一个管理 Avaya 端点功能。 0x02 漏洞概述 Avaya Aura Device Services 系统PhoneBackup接口处存在任意文件上传漏洞,攻击者可绕过验证上传任意文件获取服务器权限。 0x03 影响范围…

使用Jmeter进行http接口测试

前言: 本文主要针对http接口进行测试,使用Jmeter工具实现。 Jmter工具设计之初是用于做性能测试的,它在实现对各种接口的调用方面已经做的比较成熟,因此,本次直接使用Jmeter工具来完成对Http接口的测试。 一、开发接口…

Mac电脑vm虚拟机 VMware Fusion Pro中文 for mac

VMware Fusion Pro是一款功能强大的虚拟机软件,适用于需要在Mac电脑上运行其他操作系统的用户。它具有广泛的支持、快速稳定的特点以及多种高级功能,可以满足用户的各种需求和场景。 多操作系统支持:VMware Fusion Pro允许在Mac电脑上运行多…

平台工程文化:软件开发的创新路径和协作之道

在快速发展的软件开发领域,具有前瞻性思维的企业组织正在拥抱平台工程文化的变革力量。这种创新方法强调创建共享平台、工具和实践,使开发人员能够更快、更高效地交付高质量的软件。在本文中,我们将深入探讨平台工程文化的核心原则和深远的好…

Scala 从入门到精通

Scala 从入门到精通 数据类型 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http:…

基于STM32 + DMA介绍,应用和步骤详解(ADC多通道)

前言 本篇博客主要学习了解DMA的工作原理和部分寄存器解析&#xff0c;针对ADC多通道来对代码部分&#xff0c;应用部分作详细讲解&#xff0c;掌握代码编程原理。本篇博客大部分是自己收集和整理&#xff0c;如有侵权请联系我删除。 本次博客开发板使用的是正点原子精英版&am…

springboot_java养老院老年人问诊服务预约系统ssm

系统的目标是为管理员&#xff0c;服务者&#xff0c;医生和用户搭建一个网上沟通平台&#xff0c;保证四方的安全&#xff0c;并使四方的利益最大化。 .用户&#xff1a; &#xff08;1&#xff09;用户注册登入页面&#xff1a;用户进行操作时需要是已注册登入用户 &#xff…

WireShark监控浏览器登录过程网络请求

软件开发中经常前后端扯皮。一种是用Chrome浏览器的开发者工具 来看网络交互&#xff0c;但是前提是 网络端口的确是通的。 WireShark工作在更低层。 这个工具最大的好处&#xff0c;大家别扯皮&#xff0c;看网络底层的log&#xff0c;到底 你的端口开没开&#xff0c; 数据…

结合ColorUI组件开发微信小程序

1.自定义组件生命周期函数&#xff1a; Component({data: {},attached() {console.log("自定义组件生命周期函数 attached--先执行");this.getPos();},ready() {console.log("ready生命周期函数---在attached之后执行")},methods: {getPos() {var that th…