前端打包环境配置步骤

news2024/11/27 2:48:04

获取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.coloradmin.cn/o/1291800.html

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

相关文章

Unity传送门特效: The Beautiful Portal/Level up/Teleport/Warp VFX

7种不同风格的传送门特效! 每个传送门都有一个轻型和重型版本。 每个版本都有一个"无循环”和一个"无限”预制件:D 总共有28个预制件 -VFX完全使用Unity的粒子系统和基本的Unity着色器。 使用标准渲染管道中制作了这个资产。所以VFX的功能就像视频宣传片一样。 同时,…

Windows系统上如何搭建Linux操作系统

一、准备工作 1,VMware安装包 2,Centos IOS镜像 3,finalshell安装包 阿里云盘下载地址: https://www.alipan.com/s/uSQsWn15E3W 二,VMware安装 1,新建虚拟机 2,选择下一步 3,…

docker内容整理

docker内容整理 docker的安装 检查之前是否安装过docker,如果有使用yum remove docker卸载 [rootwoniu ~]# yum remove docker \ > docker-client \ > docker-client-latest \ > docker-common \ > docker-latest \ > docker-latest-logrotate \ &g…

vue2 百度地图实现 车在线路上移动 BMap、BMapGL

文章目录 效果BMap 实现vue2 中BMap实现vue2 中使用BMapGL实现 参考文章: 百度地图API实时画出动态运行轨迹(一条行驶轨迹),车头实时指向行驶方向,设置角度偏移 下文中可能用到的图片统一放在上面,自取。 …

python+pytest接口自动化(10)-session会话保持

在接口测试的过程中,经常会遇到有些接口需要在登录的状态下才能请求,否则会提示请登录,那么怎样解决呢? 上一篇文章我们介绍了Cookie绕过登录,其实这就是保持登录状态的方法之一。 另外一种方式则是通过session进行会…

轻松掌握接口测试!丰富你的测试技能!

接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关系等。 简答的说就是通过URL像服务器或者其他模块等&…

dfs图遍历 LeetCode1466. 重新规划路线

n 座城市,从 0 到 n-1 编号,其间共有 n-1 条路线。因此,要想在两座不同城市之间旅行只有唯一一条路线可供选择(路线网形成一颗树)。去年,交通运输部决定重新规划路线,以改变交通拥堵的状况。 路…

阿里云效部署前后端

静态站点到OSS 阿里云-云效,阿里云企业级一站式 DevOps,可以免费使用(会限制人数、流水线数量等,个人项目够用了)。相关文章 CI 持续集成 - 阿里云云效 OSS 是对象存储的意思,一般一个项目对应一个 Bucke…

UE5像素流实现

1.下载像素流插件(Pixel Streaming),勾选之后重启UE 2.设置额外启动参数(-AudioMixer -PixelStreamingIPlocalhost -PixelStreamingPort8888) 3.项目打包 4.创建项目启动快捷方式(Alt鼠标左键按住XXX.exe文件拖动) 5.快捷方式文件 配置项目运行文件参数(…

DC电源模块在新能源产业中的应用前景

BOSHIDA DC电源模块在新能源产业中的应用前景 随着新能源产业的不断发展,DC电源模块的应用前景越来越广泛。BOSHIDA DC电源模块是一种具有稳定、高效、可靠的电源输出的电源模块,它能够将电源输入电压转换为可靠的直流电源输出,广泛应用于太…

学习Python能给我们带来什么?有什么帮助?

文章目录 前言学习Python能做什么1、抓取各类数据、文本等信息2、批量清洗和处理数据3、提供可视化工具4、进行深度学习 Python的用途有哪些普通人学习python有什么好处关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python…

【LeetCode】2621. 睡眠函数

睡眠函数 Promise异步 题目题解 题目 请你编写一个异步函数,它接收一个正整数参数 millis ,并休眠 millis 毫秒。要求此函数可以解析任何值。 示例 1: 输入:millis 100 输出:100 解释: 在 100ms 后此异步…

C语言实现植物大战僵尸(完整版)

实现这个游戏需要Easy_X 这个在我前面一篇C之番外篇爱心代码有程序教你怎么下载,大家可自行查看 然后就是需要植物大战僵尸的素材和音乐,需要的可以在评论区 首先是main.cpp //开发日志 //1导入素材 //2实现最开始的游戏场景 //3实现游戏顶部的工具栏…

20、XSS——XSS跨站脚本

文章目录 一、XSS漏洞概述1.1 XSS简介 二、XSS漏洞分类2.1 反射型XSS2.2 存储型XSS2.3 DOM型XSS 三、XSS payload构造以及变形3.1 XSS payload构造3.2 XSS payload 变形 一、XSS漏洞概述 1.1 XSS简介 XSS被称为跨站脚本攻击(Cross-site scripting)&…

Chrome浏览器禁止更新策略

在做爬虫过程中,需要用到Selenium驱动浏览器去做动态爬虫 这里我一般用到的是Chrome谷歌浏览器进行爬虫 但是,目前python和Chrome浏览器适配最好的是110.版本 尽管我用了很多种方法 去取消浏览器自动更新 但是 过一段时间 浏览器总是会自动更新到最新…

【分享】拖拽式表单的优点有哪些?

如果说想要提升办公效率,那么就可以试试拖拽式表单了。它拥有可视化、拖拽式操作、易维护等优势,可以在现代化办公操作中帮助企业节省人工成本费用,提高办公效率,真正实现办公流程化应用,让数字化转型升级的梦想早日实…

pandas详细笔记

一:什么是Pandas from matplotlib import pyplot import numpy as np import pandas as pdarange np.arange(1, 10, 2) series pd.Series(arange,indexlist("ABCDE")) print(series)二:索引 三:切片 位置索引切片(左闭…

Qt之基于QMediaPlayer的音视频播放器(支持常见音视频格式)

Qt自带了一个Media Player的例子,如下图所示: 但是运行这个例子机会发现,连最基本的MP4格式视频都播放不了。因为QMediaPlayer是个壳(也可以叫框架),依赖本地解码器,视频这块默认基本上就播放个MP4,甚至连MP4都不能播放,如果要支持其他格式需要下载k-lite或者LAVFilte…

软件开发安全指南

2.1.应用系统架构安全设计要求 2.2.应用系统软件功能安全设计要求 2.3.应用系统存储安全设计要求 2.4.应用系统通讯安全设计要求 2.5.应用系统数据库安全设计要求 2.6.应用系统数据安全设计要求 软件开发全资料获取:点我获取

彻底解决org.gradle.api.artifacts

需求背景 最近在使用android studio导入hbuilder的HBuilder-Integrate-AS工程时候报错,错误消息如下两种。 错误描述 第一种 Failed to notify dependency resolution listener. void org.gradle.api.artifacts.DependencySubstitutions$Substitution.with(org.g…