vue项目使用nginx部署于linux服务器

旧城等待， 2022-12-08 05:11 174阅读 0赞

## Vue 项目打包 ##

首先将 `vue` 项目打包

npm run build

打包后，生成 dist 文件夹

## Linux环境下 nginx 的安装配置 ##

[Linux环境下 nginx 的安装配置][Linux_ nginx]

## 上传打包文件 ##

使用 `WinSCP` 工具将打包好的 dist 文件夹上传到 linux 服务器的目录中，这里我自己存放的目录是 `/home/xx/dist`

## 修改 nginx 的配置文件![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 1]  
修改完成后重启 nginx 服务，然后在浏览器输入 IP 和 端口号访问即可

./nginx -s reload

[Linux_ nginx]: https://blog.csdn.net/qq_38157825/article/details/108652444
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/56c852d7598a4720bbecde211a9cc16c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/9b94d5ee3b324e63830e3870488b6da5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Github Actions自动部署vue项目到nginx服务器

解决的问题：妈妈再也不担心我deploy时候手滑了 1. 避免手动执行重复的前端发布流程，节约开发时间和耐心 2. 减少了使用Jenkins类似的工具来做这种简单的发布

浅浅的花香味﹌/ 2023年10月04日 20:20/ 0 赞/ 32 阅读

相关 springcloud+vue+nginx+linux项目部署

一、项目打包右边栏Maven Projects ——> package 进行项目打包（可以把闪电标志点掉，这样会过滤掉test项） ![watermark_type_d3

比眉伴天荒/ 2023年09月29日 12:03/ 0 赞/ 16 阅读

相关 Linux安装nginx及部署vue项目

目录一、下载nginx 二、用xshell连接服务器 1、创建nginx目录：\`mkdir nginx\` 2、\`cd ngi

一时失言乱红尘/ 2023年02月21日 06:53/ 0 赞/ 102 阅读

相关 Linux服务器搭建VUE + Nginx部署环境

一.VUE相关环境搭建 1.去[Node.js官网][Node.js]选择合适版本的Node.js，下载安装 ![watermark_type_ZmFuZ3poZW

冷不防/ 2023年02月14日 13:23/ 0 赞/ 39 阅读

相关 vue项目如何部署到nginx服务器

1.[windows下安装nginx请看:Windows下安装Nginx][windows_nginx_Windows_Nginx] 2.[配置完成后，如何设置，nginx开

朱雀/ 2022年12月20日 11:24/ 0 赞/ 272 阅读

相关 vue项目使用nginx部署于linux服务器

Vue 项目打包首先将 `vue` 项目打包 npm run build 打包后，生成 dist 文件夹 Linux环境下 nginx 的安装配置

旧城等待，/ 2022年12月08日 05:11/ 0 赞/ 175 阅读

相关 nginx项目部署vue项目

一、nginx配置 server { listen 8085; server_name local

傷城~/ 2022年11月06日 10:54/ 0 赞/ 36 阅读

相关部署Vue项目到Linux服务器

[步骤1：CentOS7.5 安装docker][1_CentOS7.5 _docker] [步骤2：CentOS7.5基于docker安装nginx][2_CentOS7.

柔情只为你懂/ 2022年10月15日 04:48/ 0 赞/ 300 阅读

相关 windows使用nginx部署vue项目

1、下载npm 官网：https://nodejs.org/en/download/ 双击文件夹中的【node-v12.16.1-x64.msi】，按默认安装即可

妖狐艹你老母/ 2022年09月16日 11:30/ 0 赞/ 625 阅读

相关 vue项目部署到服务器nginx（超简单）

nginx服务器是一个轻量级、又简单的服务器，所以，对我来说，部署我的vue项目就选择它了。首先，下载nginx服务器，官网下载地址[http://nginx.org/en

左手的ㄟ右手/ 2022年01月07日 22:33/ 0 赞/ 497 阅读