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

旧城等待， 2022-12-08 05:11 159阅读 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 条评论，159人围观）

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

相关阅读

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

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

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

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

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

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

相关 Nginx部署Vue项目

> Nginx入门：[https://yuanyu.blog.csdn.net/article/details/91908913][https_yuanyu.blog.csdn

Bertha 。/ 2022年12月15日 12:51/ 0 赞/ 196 阅读

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

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

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

相关 nginx项目部署vue项目

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

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

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

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

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

相关 windows使用nginx部署vue项目

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

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

相关 vue+nginx 项目部署

nginx路径映射配置省略。需要注意的点：npm run build之前，需要修改的地方：配置文件一：build>>utils.js (修改publicPath:"..

阳光穿透心脏的1/2处/ 2022年01月17日 02:27/ 0 赞/ 337 阅读

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

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

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

相关 Nginx部署vue项目

nginx.conf配置文件单个vue项目配置 user nobody; worker_processes

ゝ一纸荒年。/ 2021年11月05日 13:36/ 0 赞/ 395 阅读