使用nginx服务本地运行打包后VUE项目的dist文件最简方法

已于 2024-04-11 18:40:01 修改
阅读量2.1k 收藏 3
点赞数
分类专栏： 学习笔记 文章标签： nginx vue.js 前端
于 2022-07-12 10:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Beatingworldline/article/details/125738364
版权

下载稳定版Stable version nginx
在这里插入图片描述

解压后，将vue项目打包好的dist文件夹内部文件复制，替换nginx-1.22.0\html下的所有文件
在这里插入图片描述
或者是配置\conf\nginx.conf文件的server中的路径 进行自动命中
在这里插入图片描述

运行nginx根目录下的nginx.exe文件，并在任务管理器中确认服务已启动后，访问nginx默认地址http://localhost/即可
在这里插入图片描述

跳动的世界线
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
项目打包运行dist以及nginx配置
04-11
在IT行业中，项目打包运行和Nginx配置是两个关键环节，它们对于应用程序的部署和发布至关重要。这里我们将深入探讨这两个主题。 首先，项目打包运行通常指的是将开发完成的前端或后端应用转换为可部署的形式。对于...
Vue项目部署Nginx配置文件 SSL
08-11
在部署 Vue 项目时，Nginx 配置文件 `nginx.conf` 的关键设置如下： 1. **基本配置**： - `server` 块：定义一个监听特定端口（通常是80）的服务器实例。 ```nginx server { listen 80; server_name your...
nginx运行vue项目的dist文件
honvin的博客
10-09 3566
nginx运行vue项目的dist文件，并防止刷新404
前端：简单的nginx启动本地打包文件dist
qq_45234274的博客
06-21 1489
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
在linux中使用nginx服务器部署vue打包的项目dist以及SringBoot后端部署的jar包
最新发布
qq_66211468的博客
05-24 290
首先是需要在服务器安装环境的如，JDK、Mysql、nginx。把环境都配置好之后开始下一步。
控制pc端和手机端显示不同的页面
跟着互联网
09-24 2779
这里介绍2种方法来控制pc端和手机端显示不同的页面 1、使用nginx根据userAgent控制跳转到不同的路径或者不同的域名 set $flag 0; if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){ set $flag "${flag}1"; } if ( $request_uri ~ "...
使用nginx反向代理运行dist文件
weixin_39150852的博客
10-08 5230
1、下载nginx安装文件 链接: https://pan.baidu.com/s/13so-lkTbyCz7gIZy_0QyGw 提取码: v4cf 2、修改端口号 打开conf文件夹的nginx.conf文件，Nginx服务器的基础配置，默认的配置都存放在此，可以在这里修改端口号 3、新建一个文件夹，将dist文件和nginx文件存放在同一目录下 注意：此目录不能出现中文字符，否则无法运行...
将Vue的dist文件部署到本地Nginx
qq_62479388的博客
11-28 796
将Vue的dist文件部署到本地Nginx
nginx部署vue的dist文件
weixin_43964779的博客
11-23 2127
第一步当然是下载了 http://nginx.org/en/download.html 下载的不用安装，可以直接点击 nginx.exe 文件打开，也可以通过 cmd 打开 nginx // cd到nginx所在目录，启动nginx start nginx // 修改配置后重新加载生效 nginx -s reload // 重新打开日志文件 nginx -s reopen // 测试nginx配置文件是否正确 nginx -t -c /path/to/nginx.conf // .
nginx 部署前端vue项目dist文件
苏谨
11-04 1661
nginx 部署前端页面。
前端打包的dist文件 怎么用nginx 在 Windows 部署
wei7a7a7a的博客
07-06 1278
（如果在步骤 3 中使用了不同的域名或 IP 地址，请相应地修改 URL）。Windows 的 Nginx 安装程序，并将其安装到您的计算机上。配置 Nginx：安装完成后，在 Nginx 的安装目录中找到。要在 Windows 上使用 Nginx 部署前端打包的。下载 Nginx：首先，您需要从 Nginx 官方网站（文件后，返回到 Nginx 的安装目录，并运行。验证部署：打开您的浏览器，并访问。），并使用文本编辑器打开它。在上面的配置中，请确保将。，这是前端应用的入口文件。配置文件（默认路径为。
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index....
Vue-cli项目部署到Nginx服务器的方法
10-16
Vue CLI 项目部署到 Nginx 服务器是将构建后的静态资源发布到 Nginx 服务器上，以便通过 Nginx 提供服务。 1. **Nginx 安装与基本操作** - Nginx 是一款高性能的 HTTP 和反向代理服务器，可以在多种操作系统上运行...
dist包在windows的nginx下部署运行
qq_44982110的博客
04-23 398
链接：https://pan.quark.cn/s/e87bbf87a742。我用夸克网盘分享了「nginx-1.18.0.zip」
将打包之后的dist文件放在Nginx上运行
weixin_44689966的博客
06-01 971
打开终端，路径切换到nginx文件夹中，运行start nginx 启动nginx服务。接着在地址栏中输入http://localhost/，就能看到dist文件运行的内容。官网：http://nginx.org/en/download.html。将dist文件夹下面的文件全部复制到html文件夹里面。这里解压到c盘根目录。
本地通过nginx启动vue打包后的项目
weixin_41285537的博客
04-27 507
本地通过nginx启动vue打包后的项目 dist文件夹内的打包内容
vue打包dist包，通过nginx反向代理，在本地访问
yumihe
07-25 2421
第一步：去官网下载nginx 第二步：打开配置文件：conf/nginx.conf，有三处配置 server { listen 8888; location / { # 配置dist文件路径 root /project/project-rsdq/RSDQ/rsdq-client/dist; index index.html i...
nginx 配置dist
weixin_43834415的博客
10-20 2441
server { listen 80; server_name #服务名; root /www/dist; #dist 位置 location /dev_api/ { #根据dev_api 代理跳转 rewrite ^/dev_api/(.*)$ /$1 break; proxy_pass #代理接口地址; } location
vue打包后的dist部署nginx
06-28
Vue打包后的dist文件可以通过Nginx进行部署。具体步骤如下： 1. 安装Nginx 在Linux系统中，可以通过以下命令安装Nginx： ``` sudo apt-get update sudo apt-get install nginx ``` 2. 配置Nginx 在Nginx的配置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

跳动的世界线

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值