Ubuntu+nginx 部署vue项目

最新推荐文章于 2025-04-16 23:52:58 发布
最新推荐文章于 2025-04-16 23:52:58 发布
阅读量1k 收藏 7
点赞数
分类专栏： 前端项目部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41545048/article/details/110493544
版权

  1. 安装nginx
    apt-get purge nginx nginx-common

  2. 进入nginx配置文件，配置nginx
    cd etc/nginx/sites-enabled
    sudo vim default

    进入default，点击i打开编辑模式，主要配置端口，文件位置和接口地址，如下图：

    *所配端口必须保证是放行状态
    netstat -aptn 查看所有放行的端口号
    sudo ufw enable allow 8888 放行指定的端口号
    在这里插入图片描述
    *配置项目路径,root后面为vue项目在该服务器的路径，配置完成后浏览器访问路径为"ip+port+/"
    在这里插入图片描述
    *如需配置多个项目，如下，浏览器当问地址分别为"ip+port+/milu/“和"ip+port+/adPlatform/”
    在这里插入图片描述
    *配置接口地址

    proxy_pass为后端服务地址，如果前后端在同一个域下，马赛克部分也可写127.0.0.1
    在这里插入图片描述

  3. 点击esc退出编辑模式，输入：wq!退出并保存

  4. 重启nginx服务
    sudo -s reload 重启服务(前提是启动状态下)
    sudo systemctl start nginx.service 启动服务
    sudo -s stop 停止服务
    ps -aux | grep nginx 查看nginx运行状态

Vue项目部署到服务器（ubuntu）
天天向上
03-12 4048
Vue 1.在服务器安装nodejs和npm，打开服务器的terminal。 sudo apt-get install nodejs sudo apt install nodejs-legacy sudo apt install npm 2.设置镜像源 sudo npm config set registry https://registry.npm.taobao.org sudo npm config list 打开vscode，右击项目，Open in Integrated Terminal，输入
轻松Docker+Nginx 部署Vue前端项目
aapprentice的博客
03-01 731
通过dockfile创建镜像,再通过镜像创建并运行容器,再修改nginx配置文件,即可轻松部署vue项目
ubuntu安装nginx并发布vue项目
huzi_1998的博客
05-28 1145
nginx.conf配置文件中并没有配置端口号和IP，这个我们需要自己手动添加，为了便于修改，我们将vue项目的配置放在其他地方文件里，在nginx.conf 只需要将vue项目的配置文件所在路径引入即可。移除 nginx 软件包以及共享的配置和数据文件，但是针对的是名为 nginx-full 的特定软件包和 nginx-common。purge命令将会移除 nginx 软件包及其相关的配置文件，完全清理掉所有与 nginx 相关的数据。使用apt-get安装后，nginx的默认路径为。
在ubuntu20.04+系统部署VUE及Django项目的过程记录——以腾讯云为例
最新发布
weixin_52938961的博客
04-16 1275
在ubuntu20.04+系统部署VUE及Django项目的过程记录——以腾讯云为例
ubuntu使用nginx部署vue项目
qq_43589143的博客
02-19 5595
1.安装nginx 更新源列表 apt-get update 安装nginx apt-get install nginx 检查nginx是否安装，输入如下命令后若出现版本号则安装成功 nginx -v 启动nginx server nginx restart 在浏览器输入ip地址，若出现如下页面则启动成功 2. 打包上传vue项目到服务器 打包 我的项目使用的是vs code，在终端输入如下命令进行打包 npm run build 上传 打包完成后会有dist文件，该文
Ubuntu 上使用nginx部署vue项目
challenglistic的博客
08-18 2855
Ubuntu 上使用nginx部署vue项目
Ubuntu服务器上部署Vue项目
Lyy1991Wdl的专栏
06-13 3320
Ubuntu 虚拟机上使用nginx 代理部署Vue项目
Django个人博客搭建教程—使用Ubuntu+Nginx部署你的Vue应用
01-09
/etc/nginx/nginx.conf添加这一段 server { listen 8090; server_name www.guanacossj.com; index index.html; root /home/MyBlog/myblogfront/dist; location / { try_files $uri $uri/ /index.html; } } ...
【前端部署】Ubuntu22.04 使用nginx部署vue前端项目教程
weixin_53459689的博客
02-19 5781
【2024最新前端部署】Ubuntu22.04 使用nginx部署vue前端项目教程。一.ubuntu安装nginx。二.vue项目代码打包。三.ubuntu修改nginx配置文件。四.部署前端代码
【Nginx 】Nginx 部署前端 vue 项目
m0_74825746的博客
01-17 1536
在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。
ubuntu 安装nginx并部署vue项目
qq_42754614的博客
11-27 1575
ubuntu 安装nginx并部署vue项目
在ubuntu系统里把vue项目部署nginx服务器的方法
不想成为网红的程序员不是好司机
09-12 1214
nginx上部署vue项目的方法
ubuntu服务器部署Nginx之vue项目+域名+图片
搬砖
06-05 1370
提示：ubuntu使用apt；centos使用yum1.安装Nginx(默认是安装到/etc/nginx)2.查看nginx版本nginx -v3.启动nginx4.在浏览器直接输入服务器的ip进行访问，出现成功！
Ubuntu下使用nginx发布vue项目
weixin_51698025的博客
05-12 453
文章目录 一、Ubuntu18.04搭建Nginx服务器 二、vue项目打包 Nginx是什么？ Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等 1. Ubuntu18.04搭建nginx服务器 1.1 ubuntu安...
ubuntu系统下通过nginx部署vue项目
weixin_43340876的博客
10-19 613
以上步骤应该足以帮助你在 Nginx 上部署 Vue 项目。根据你的具体需求，可能还需要进行其他配置，例如 SSL 加密、HTTP/2 支持等。现在，你应该可以通过浏览器访问你的 Vue 项目了。在浏览器的地址栏输入你服务器的域名或 IP 地址。首先，你需要在本地机器上构建你的 Vue 项目。编辑 Nginx 配置文件来指向 Vue 项目的。目录，其中包含了用于部署的项目文件。在你的服务器上安装 Nginx。
ubuntu16环境 nginx服务器 vue项目的部署与发布
qq_41938767的博客
03-19 347
ubuntu16环境 nginx服务器 vue项目的部署与发布 开发部署使用的服务器：nginx linux环境：ubuntu16 步骤：（执行操作时 下面的中括号【】是不需要的） # 第一步 修改好vue项目中的URL,使用npm run build命令打包为dist文件夹 # 第二步 下载nginx的压缩包，然后传输到服务器上 或者 在linux使用命令行下载 【wget http://nginx.org/download/nginx-1.13.6.tar.gz】 # 第三步 解压，使用的命令为 【ta
如何使用nginx部署vue网站 （ubuntu系统）
疯狂屌丝程序员
05-15 476
部署Vue网站到Nginx的基本步骤。记得根据自己的实际情况调整配置中的路径和域名，并按需修改Nginx配置文件。部署完毕后，你的Vue网站就可以通过Nginx服务器进行访问了。部署Vue.js网站需要使用Nginx作为服务器来托管静态资源。访问你的网站：现在，在浏览器中输入你的域名，应该可以看到部署在Nginx上的Vue网站了。配置Nginx：打开Nginx的配置文件，在Ubuntu系统上，该文件位于。构建Vue项目：首先确保你的Vue项目已经被构建。命令来生成生产环境的静态文件。
Ubuntu安装Nginx部署vue项目
个人学习笔记库，一篇一篇记录成长的足迹
04-27 2585
官网下载Nginx压缩包 Nginx下载 上传到Linux或直接在Linux上下载压缩包。 # 解压 tar -zxvf ... ubuntu下安装nginx时依赖库zlib，pcre，openssl安装方法 #依赖包openssl安装 sudo apt-get install openssl libssl-dev # 依赖包pcre安装 sudo apt-get install libpcre3 libpcre3-dev # 依赖包zlib安装 sudo apt-get install
Ubuntu 安装部署vue nginx
weixin_41463944的博客
09-06 305
一、在 Ubuntu 上安装 Nginx sudo apt-get update sudo apt install curl gnupg2 ca-certificates lsb-release echo "deb http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" \ | sudo tee /etc/apt/sources.list.d/nginx.list curl -fsSL https://nginx.org/keys/n
ubuntu+nginx部署vue3
05-30
好的，这里是部署Vue3应用到Ubuntu服务器并使用Nginx作为反向代理的步骤： 1. 在Ubuntu服务器上安装Node.js和npm。可以使用以下命令安装： ``` sudo apt update sudo apt install nodejs sudo apt install npm ``` 2. 在服务器上安装Vue CLI： ``` sudo npm install -g @vue/cli ``` 3. 使用Vue CLI创建Vue3应用： ``` vue create my-app ``` 4. 进入应用目录并启动开发服务器： ``` cd my-app npm run serve ``` 5. 在Nginx中配置反向代理。在Nginx的配置文件中添加以下内容： ``` server { listen 80; server_name example.com; # 修改为你的域名 location / { proxy_pass http://localhost:8080; # 修改为你的应用监听的端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 6. 重新加载Nginx配置并启动Nginx服务： ``` sudo systemctl reload nginx sudo systemctl start nginx ``` 现在你的Vue3应用已经成功部署到Ubuntu服务器并使用Nginx作为反向代理。你可以通过访问你的域名来查看应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

么心么肺

你的鼓励将是我学习的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值