centos7上发布vue项目

最新推荐文章于 2025-05-23 10:24:02 发布
最新推荐文章于 2025-05-23 10:24:02 发布
阅读量1k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kaijixin/article/details/106294947
本文详述了如何在服务器上部署Vue.js项目。包括使用npm打包Vue工程，将dist文件上传至服务器，配置Nginx并重启服务，最后验证前端页面是否成功加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

       前提：一、nginx在服务器上已经安装。二、在idea上已打开vue工程

1.打包
       在vue工程根目录录执行打包命令：npm run build,如下图
在这里插入图片描述出现如下界面表示打包成功
在这里插入图片描述打包文件为根目录下的dist文件，我们将dist文件夹压缩为zip文件，以便上传。
在这里插入图片描述

2.上传打包文件
       在服务器上建立文件夹存放dist发布文件，在此笔者建立的发布文件路径为：/usr/local/webapp。上传dist.zip文件到该目录下，解压：
在这里插入图片描述

3.nginx配置
打开nginx配置文件，笔者的nginx配置文件路径为/usr/local/nginx/conf，打开配置文件nginx.conf 做如下配置：
在这里插入图片描述
4.重启nginx
进入nginx的sbin目录下执行命令 sudo ./nginx -s reload即可

在这里插入图片描述5.验证
输入 http://服务器IP +nginx监听端口 即可访问vue前端页面
在这里插入图片描述

centos7 nodejs 启动vue项目
zhongminyue的博客
04-23 1700
1.准备项目文件及目录 2.检查nodejs 环境 3.安装vue-cli脚手架构建工具 命令：npm install -g vue-cli 4.切换项目目录，运行初始化命令 切换命令： cd /projects/DDSWeb 初始化命令：vue init webpack renren-fast-vue 这时候会让用户输入几个基本的选项，如项目名称，描述，作者等信息【...
Centos7部署Vue项目
qq_41082746的博客
06-12 2539
一 :安装docker (1)安装依赖包: sudo yum install -y yum-utils device-mapper-persistent-data lvm2 (2)设置阿里云镜像源 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo (3)安装 sudo yum install docker-ce docker-ce-cli
Linux下部署Vue项目部署
最新发布
qq_70546613的博客
05-23 1921
介绍：是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 和 服务器，也是一个 代理服务器。部署系统： 二、下载Nginx安装包 官网地址：nginx: download 三、解压Nginx 四、编译和安装 进入解压后的Nginx目录并进行编译和安装： Nginx安装完成后，默认自动创建 目录，并创建必要的文件和目录。 五、防火墙设置 如果您的系统启用了防火墙，需要关闭防火墙（如果访问不到错误日志没有报错可以看看防火墙） 六、启动Nginx 进入Nginx的安装目录： 然后，启动Nginx服
Neginx配置
wujianjun6932的专栏
03-08 1261
./configure \ --prefix=/usr/local/nginx \ --pid-path=/var/run/nginx/nginx.pid \ --lock-path=/var/lock/nginx.lock \ --error-log-path=/var/log/nginx/error.log \ --http-log-path=/var/log/nginx/acces
centos7配置 vue_centos7部署vue项目（前后端分离，nginx）
weixin_34877373的博客
12-24 720
一、环境准备1、centos7系统2、mysql数据库3、在centos7虚拟机上安装好nginx二、部署内容准备1、后端war包或者可执行jar因为我这里是spring boot项目。我就以可执行jar文件作为后端部署内容，如果是war包，则需要部署在web容器中，这个很简单，不多说。首先右键点击自己要部署的项目，run as---->maven insatll打包找到打包好的jar,...
centos部署vue项目(java，tomcat环境的搭建)
todoitbo的博客
06-29 936
centos部署vue项目(java，tomcat环境的搭建)
centos7 部署vue项目+反向代理
rojie0的博客
01-17 2223
linux centos7 nginx 部署vue项目 一站式，按步骤即可成功部署项目
使用centos 7 和nginx部署vue或react项目
y227766的博客
07-28 1951
手把手教你 使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目
Vue 项目部署上线 Centos7（保姆级教程）
小张编程旅途的博客
08-20 826
输入服务器地址:端口，有购买域名并备案的也可以直接输入域名：端口。前端基于Vue集成Element-UI框架。最近自己捣鼓实现了一个Web个人博客系统。将部署过程中遇到的问题整理记录下。的错误可以尝试在打包前在终端执行。下面生成一个nginx目录。后端基于go+gin框架。下载安装Nginx安装包。安装好Nginx之后会在。如果在打包过程中遇到。本文采用第二种方法（
CentOS部署vue项目
snow的博客
11-11 7045
安装nginx 如何在CentOS 7上安装Nginx_oldguncm的专栏-优快云博客_centos 安装nginx
CentOS 7 Jenkins部署Vue项目
上善若水 厚德载物
12-01 355
前面的配置和SpringBoot后台项目一样，这里构建环境这里选择刚才咱们安装的NodeJsv12.16.3这个进行编译.用node -v 查看本地开发环境的NodeJs版本,尽量使用和开发环境一样的版本.可以自行安装或使用Jenkins自动安装，这里用的自动安装。注意插件名字的大小写NodeJs。选择新建一个自由风格的软件项目。打开全局工具配置里进行设置。
Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤，从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf）
a1764739438的博客
09-05 5263
Centos7通过nginx(编写nginx配置文件，nginx启停)+tomcat（tomcat启停）部署Vue（前端配置文件详细修改）+SpringBoot项目（文件配置，打包步骤）(超详细步骤）
Linux Centos7环境下搭建vue开发环境
12-10 1748
1、下载node.js安装包 #wget https://npm.taobao.org/mirrors/node/v10.13.0/node-v10.13.0.tar.gz #tar -zxvf node-v10.13.0.tar.gz #cd node-v10.13.0 #./configure #make && make install 编译安装时间会很长，请耐心等待完成，完成后验证。 使用node -v和npm-v来验证是否安装成功，如果安装成功会显示相应的版本信息。 [min
centOS部署VUE项目
此生不换的博客
06-13 1336
centos部署VUE项目
CentOS7系统搭建与前后端分离项目（Vue3+SpringBoot）部署
weixin_45496087的博客
06-17 1794
VMware虚拟机安装与CentOS7系统搭建和前后端分离项目（Vue3+SpringBoot）部署
centos7.2 部署VUE项目
Ta曰丿、她活的博客
12-29 1492
【1】项目config/index.js配置更改： 然后使用npmrun build命令打包，会在下面里面生成dist目录，直接把dist上传到服务器中，我这里传上去后，更改dist为zhoul作为目录名称。放在/usr/local/vuePorject目录下。也就是下面root里面配置的路径。 【2】服务器安装nginx，服务器安装nginx 更改nginx.conf配置 然后使用...
在centos 7 nginx 中部署vue项目
心如海的博客
06-05 1191
nginx 中部署vue项目
CentOS下前后端分离项目（Vue+SpringBoot）的详细部署过程（初学者，简易版）
qq_41286666的博客
08-15 2750
项目概况：前端技术：Vue + ElementUI后端技术：SpringBoot + Mysql + Redis。本文详细展示了在CentOS下部署前后端分离项目的全过程。
centos系统部署vue项目
UCAS小时的博客
10-13 3281
2.下载Linux版本的Nginx安装包 https://nginx.org/en/download.html。
vue项目部署到服务器（Centos7）
qq_44750631的博客
12-23 1577
将dist文件夹上传到服务器，存放路径自己定。1.进入到 nginx 安装路径的conf文件夹下。这里是存放在：/usr/local/vue。2.编辑nginx.conf文件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值