vue前端项目上线配置

1.准备云服务器

建议使用阿里云、腾讯云、华为云、百度云
自行官网购买或新人免费体验

2. 工具安装

xShell(远程连接工具)
- 新建会话
- 主机：服务器公网IP，验证用户、密码
- 完成连接
xFTP(文件传输工具)

3. 服务器nodejs安装

在nodejs官网（https://nodejs.org/en/）找到对应版本，复制下载路径
在xShell远程控制台输入：

# mkdir /data/tools  // 新建文件目录，保存安装包
# cd /data/tools        // 打开目录
# wget 下载路径     // 下载安装包，wget命令根据url下载文件
# ls                    // ls命令查看目录下文件，查看是否下载成功# xz -d node-v16.14.2-linux-x64.tar.xz    //解压xz
# tar xf node-v16.14.2-linux-x64.tar    // 解压tar
# mv node-v16.14.2-linux-x64 /usr/local/node    // 移动到/usr/local/node，nodejs的存放目录，用于配置环境变量

配置环境变量

# vi /etc/profile    // 编辑profile文件，vi是编辑器，按 i 进去插入状态，在最后插入环境变量配置，按ESC退出插入状态，输入 :wq 保存并退出vi编辑器
# source /etc/profile   // 更新文件

环境变量配置
export NODE_HOME=/usr/local/node       // 新建一个环境变量NODEJS，值为nodejs解压后的存放目录
export PATH=$PATH:$NODE_HOME/bin       // 建立路径

验证成功

# node -v    // 查看版本号
# npm -v    // 有版本号就成功了

安装nrm：npm源管理器，快速切换源地址

# npm i -g nrm   // 全局安装nrm
# nrm -V    // 查看安装成功
# nrm ls    // 查看所有镜像源地址npm ---------- https://registry.npmjs.org/yarn --------- https://registry.yarnpkg.com/tencent ------ https://mirrors.cloud.tencent.com/npm/cnpm --------- https://r.cnpmjs.org/taobao ------- https://registry.npmmirror.com/npmMirror ---- https://skimdb.npmjs.com/registry/
# nrm test // 测试地址的延迟
* npm ------ 726msyarn ----- 1188mstencent -- 970mscnpm ----- 1151mstaobao --- 311msnpmMirror - 4912ms
# nrm use taobao    // 使用延迟较小的taobao镜像源Registry has been set to: https://registry.npmmirror.com/

4.部署nodejs后端

新建项目存放地址

# cd /usr/local
# mkdir serve   // 在/usr/local下新建serve文件夹，用来存放后端项目文件

文件传输
- 将项目打包（不要打包node_modules文件夹，将其与文件全部打包）
- 利用xFTP将压缩包传输到/usr/local/serve
解压文件

# ls
NeteaseCloudMusicApi.zip
# unzip NeteaseCloudMusicApi.zip

安装依赖

# npm i

启动服务

# node app.js

全局安装pm2

  # npm -g pm2# pm2 start // 启动服务# PM2 list  // 查看服务列表# PM2 delete id // 断开服务

5.安装nginx

安装所需插件

gcc （安装前查看有没有：gcc -v）

# yum -y install gcc

pcre、pcre-devel (（安装前查看有没有)

# yum -y install pcre  pcre-devel

zlib

# yum install -y zlib zlib-devel

openssl

# yum install -y openssl openssl-devel

下载nginx

# wget https://nginx.org/download/nginx-1.20.2.tar.gz

安装

# cd /usr/local
# mkdir nginx
# cd nginx
# tar -zxvf  nginx-1.20.2.tar.gz
#ls
conf  html  logs  nginx-1.20.2  nginx-1.20.2.tar.gz  sbin

激活

# cd nginx-1.20.2
# ./configure
# make
# make install

启动

# cd /usr/local/nginx/sbin
# ./nginx

修改配置文件

# cd /usr/local/nginx/conf
# vi nginx.conf

6.部署vue前端

打包前端项目，生成dist文件夹，打包dist文件夹为dist.zip
创建根目录

# cd /usr/local/nginx
# mkdir rootfile

修改nginx的配置文件，将root路径设置为我们自己创建的根路径，http端口默认为80

# vi /usr/local/nginx/conf/nginx.conf

将dist.zip利用xFTP上传到创建的根目录，并解压

7. 可能遇到的问题

访问失败：后端启动的接口没有在云服务器开启
nginx服务开启不了：80端口被占用

已上线项目分享

前端
- github:https://github.com/LLtaishuai/cloudmusic.git
后端
- github:https://github.com/Binaryify/NeteaseCloudMusicApi.git
线上地址
- IP: http://101.35.207.17

vue前端项目上线配置相关推荐

Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
cmd搭建vue前端项目详细过程
cmd 搭建vue前端项目下载nods.js node.js下载(Windows版本) next 安装完毕! 配置node.js环境变量进入找到Path进入这里填你的node.js的安装路径验 ...
SkyWaking监控Vue前端接入浏览器配置教程
skywaking监控Vue前端接入浏览器配置步骤第一步引入插件安装愿意等同于anget npm install skywalking-client-js --save 第二步在main.js中 ...
web前端项目上线流程是怎样的
web前端项目上线流程是怎样的? (1)流程建议模拟线上的开发环境本地反向代理线上真实环境开发即可.(apache,nginx,nodejs均可实现) 模拟线上的测试环境模拟线上的测试环境,其实 ...
Vue前端项目-Vuex实战使用
目录 1.创建 vue-cli 脚手架项目 2.安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5.将 store 分割成模块化(Module) 6.项目中的模 ...
Vue前端项目自适应布局
Vue前端项目自适应布局一.单位尺寸二.基于rem实现自适应布局一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:"root em" ...
前端项目上线相关配置
1. 通过node创建web服务器创建node项目,并安装express,通过express快速创建web服务器,将vue打包生成的dist文件夹,托管为静态资源即可,关键代码如下: const e ...
nginx配置vue项目500_一个Nginx部署多个vue前端项目总结
摘要: 近来接手了一个二次开发的前后端分离模式的项目,其中在前端项目的部署上需要让2个前端项目都部署到一个IP地址和端口下,那么我们这里就要用到Nginx了,接下来我们看看如何在一个Nginx下部署2 ...

vue前端项目上线配置

vue前端项目上线配置

1.准备云服务器

2. 工具安装

3. 服务器nodejs安装

4.部署nodejs后端

5.安装nginx

6.部署vue前端

7. 可能遇到的问题

已上线项目分享

vue前端项目上线配置相关推荐

最新文章

热门文章