centos7上发布vue项目

最新推荐文章于 2024-08-20 11:52:36 发布
原创 最新推荐文章于 2024-08-20 11:52:36 发布 · 1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详述了如何在服务器上部署Vue.js项目。包括使用npm打包Vue工程，将dist文件上传至服务器，配置Nginx并重启服务，最后验证前端页面是否成功加载。

       前提：一、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 做如下配置：

最低0.47元/天 解锁文章
centos7 nodejs 启动vue项目
zhongminyue的博客
04-23 1732
1.准备项目文件及目录 2.检查nodejs 环境 3.安装vue-cli脚手架构建工具 命令：npm install -g vue-cli 4.切换项目目录，运行初始化命令 切换命令： cd /projects/DDSWeb 初始化命令：vue init webpack renren-fast-vue 这时候会让用户输入几个基本的选项，如项目名称，描述，作者等信息【...
在centos 7 nginx 中部署vue项目
心如海的博客
06-05 1228
nginx 中部署vue项目
CentOS下前后端分离项目（Vue+SpringBoot）的详细部署过程（初学者，简易版）
qq_41286666的博客
08-15 2811
项目概况：前端技术：Vue + ElementUI后端技术：SpringBoot + Mysql + Redis。本文详细展示了在CentOS下部署前后端分离项目的全过程。
Centos7部署Vue项目
qq_41082746的博客
06-12 2569
一 :安装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
Neginx配置
wujianjun6932的专栏
03-08 1309
./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
【Gitlab CI】CentOS 7 使用 gitlab-runner 实现 Vue 项目自动化构建
01-20
CentOS 7 + git + docker git 安装步骤请自行搜索（因为我忘了） docker 安装参见 CentOS 7 安装 docker 配置 SSH key 将 .ssh/id_rsa.pub 的内容复制添加到 Gitlab 的 SSH key 不会操作请参见 Gitlab 上的官方教程 ...
若依（一）：在CentOS中从零部署若依项目（ruoyi-vue、前后端分离）过程记录，该博客里需要用到的工具
06-12
若依（一）：在CentOS中从零部署若依项目（ruoyi-vue、前后端分离）过程记录，该博客里需要用到的工具。 若依（一）：在CentOS中从零部署若依项目（ruoyi-vue、前后端分离）过程记录，该博客里需要用到的工具 若依...
centos7配置 vue_centos7部署vue项目（前后端分离，nginx）
weixin_34877373的博客
12-24 753
一、环境准备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 1万+
centos部署vue项目(java，tomcat环境的搭建)
centos7 部署vue项目+反向代理
rojie0的博客
01-17 2237
linux centos7 nginx 部署vue项目 一站式，按步骤即可成功部署项目
使用centos 7 和nginx部署vue或react项目
y227766的博客
07-28 2021
手把手教你 使用centos 7 和nginx 搭配使用Xshell和Xftp部署vue或react项目
Vue 项目部署上线 Centos7（保姆级教程）
小张编程旅途的博客
08-20 918
输入服务器地址:端口，有购买域名并备案的也可以直接输入域名：端口。前端基于Vue集成Element-UI框架。最近自己捣鼓实现了一个Web个人博客系统。将部署过程中遇到的问题整理记录下。的错误可以尝试在打包前在终端执行。下面生成一个nginx目录。后端基于go+gin框架。下载安装Nginx安装包。安装好Nginx之后会在。如果在打包过程中遇到。本文采用第二种方法（
CentOS部署vue项目
snow的博客
11-11 7097
安装nginx 如何在CentOS 7上安装Nginx_oldguncm的专栏-优快云博客_centos 安装nginx
CentOS 7 Jenkins部署Vue项目
上善若水 厚德载物
12-01 381
前面的配置和SpringBoot后台项目一样，这里构建环境这里选择刚才咱们安装的NodeJsv12.16.3这个进行编译.用node -v 查看本地开发环境的NodeJs版本,尽量使用和开发环境一样的版本.可以自行安装或使用Jenkins自动安装，这里用的自动安装。注意插件名字的大小写NodeJs。选择新建一个自由风格的软件项目。打开全局工具配置里进行设置。
Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤，从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf）
a1764739438的博客
09-05 5436
Centos7通过nginx(编写nginx配置文件，nginx启停)+tomcat（tomcat启停）部署Vue（前端配置文件详细修改）+SpringBoot项目（文件配置，打包步骤）(超详细步骤）
Linux Centos7环境下搭建vue开发环境
12-10 1852
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 1356
centos部署VUE项目
CentOS7系统搭建与前后端分离项目（Vue3+SpringBoot）部署
weixin_45496087的博客
06-17 1948
VMware虚拟机安装与CentOS7系统搭建和前后端分离项目（Vue3+SpringBoot）部署
centos7.2 部署VUE项目
Ta曰丿、她活的博客
12-29 1514
【1】项目config/index.js配置更改： 然后使用npmrun build命令打包，会在下面里面生成dist目录，直接把dist上传到服务器中，我这里传上去后，更改dist为zhoul作为目录名称。放在/usr/local/vuePorject目录下。也就是下面root里面配置的路径。 【2】服务器安装nginx，服务器安装nginx 更改nginx.conf配置 然后使用...
centos7 jenkins 部署vue3项目
最新发布
05-07
<think>好的，用户想在CentOS 7上使用Jenkins自动化部署Vue 3项目。我需要根据提供的引用信息，整理出一个清晰的步骤指南。首先，用户可能需要安装必要的环境，比如Java、Node.js、Git和Nginx。引用2中提到安装Java和Git的命令，应该需要先更新系统，然后安装这些依赖。接着是Jenkins本身的安装，引用2和引用3都提到了使用yum安装Jenkins，启动服务，以及配置插件。 然后，用户需要配置Node.js环境，因为Vue项目需要npm构建。引用1和引用3提到了安装Node.js插件，并在Jenkins中配置Node.js路径。这里可能需要下载Node.js并设置环境变量，确保Jenkins能访问到。 接下来是Jenkins任务的创建，引用1中的示例配置可能需要设置Git仓库地址、构建触发器，以及添加构建步骤执行npm命令。需要注意权限问题，引用4提到如果遇到权限问题，可能需要将Jenkins用户加入root组或修改项目目录权限。此外，引用3提到的权限插件Role-based Authorization Strategy，可能需要配置以确保安全。 部署部分，用户可能需要使用Nginx作为Web服务器。引用2中安装Nginx并启动服务，之后可能需要配置Nginx的站点指向构建后的dist目录。同时，使用Docker部署Nginx也是一个选项，如引用1中的示例，但用户可能更倾向于直接使用系统安装的Nginx。 最后，自动化触发构建，比如通过Git钩子或Jenkins的轮询SCM功能。此外，测试构建和解决可能出现的权限问题也很重要，如引用4中的chown命令修改目录权限。 需要确保每一步都正确无误，特别是环境变量和路径的设置，避免因权限不足导致构建失败。同时，提供相关问题帮助用户深入理解，比如优化部署流程或处理其他常见问题。</think>以下是CentOS 7系统配置Jenkins自动化部署Vue 3项目的完整指南： ### 一、环境准备 1. **系统更新** ```bash sudo yum update -y ``` 2. **安装依赖环境** ```bash sudo yum install -y java-11-openjdk git nginx ``` 3. **配置Node.js环境** ```bash curl -sL https://rpm.nodesource.com/setup_16.x | sudo bash - sudo yum install -y nodejs ``` ### 二、Jenkins安装配置 1. **安装Jenkins** ```bash sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key sudo yum install -y jenkins sudo systemctl start jenkins sudo systemctl enable jenkins ``` 2. **配置权限（关键步骤）** ```bash sudo usermod -aG root jenkins # 解决部署权限问题[^4] sudo chown -R jenkins:root /var/lib/jenkins ``` 3. **安装必要插件** - NodeJS Plugin - Git plugin - Nginx代理配置插件 ### 三、Jenkins项目配置 1. **全局工具配置** - NodeJS安装路径：`/usr/bin/node` - NPM路径：`/usr/bin/npm` 2. **新建自由风格项目** ```plaintext 1. 源码管理：Git仓库地址 2. 构建触发器：选择"轮询 SCM"（建议设置H/5 * * * *） 3. 构建环境：勾选"Provide Node & npm bin/ folder" 4. 构建步骤： [Execute shell] npm install npm run build 5. 后置操作： cp -rf dist/* /usr/share/nginx/html/ systemctl reload nginx ``` ### 四、Nginx部署配置 ```nginx server { listen 80; server_name your_domain; root /usr/share/nginx/html; location / { try_files $uri $uri/ /index.html; } } ``` ### 五、权限优化（可选） 通过安装`Role-based Authorization Strategy`插件实现细粒度权限控制[^3]： 1. 全局角色：开发人员只读权限 2. 项目角色：匹配`vue-app*`项目 3. 用户分配：关联具体账号 ### 六、验证部署 访问`http://服务器IP`即可查看部署的Vue 3应用
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值