vue运行dist 打包后项目+nginx简单使用

已于 2022-12-06 09:40:55 修改
阅读量1.9k 收藏 9
点赞数 1
分类专栏： js基础 vue.js 文章标签： vue.js 前端 javascript
于 2022-12-05 14:46:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45421249/article/details/128186313
版权

vue项目运行打包后dist服务

一、下载nginx

nginx官网戳 ☞
下载完成---->解压nginx

二、修改nginx配置

打开conf文件夹找到nginx.conf文件 拖入你的编辑器(vscode)
修改如下配置 保存文件
要修改的两个地方
点击nginx.exe 运行nginx
在这里插入图片描述

三、运行dist项目

浏览器输入浏览器输入 localhost:8888 或你电脑ip+:8888 回车

总结

以上方法仅供参考

前端bug工程师
关注
专栏目录
vue打包Nginx配置
donghuzi1
07-20 242
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; def...
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
2401_84437170的博客
04-28 550
server {# 自定义监听端口# 浏览器访问域名serverserverroot dist;
vue项目打包后 nginx 怎么配置
songt1122的博客
04-16 278
一直弄的后端，现在前端也开始干了。 vue打包后部署碰到了几个问题，比如代理，比如刷新页面失效， 比如静态资源无法访问。 这么说吧 百度出来的 一半可能都是那半桶水写的玩意。浪费很多时间。 我这里贴出来我的nginx配置。 你复制改改就能用。 server { listen 8888; server_name xxxx; root D:/cccc/xxxx/dist; #charset koi8-...
nginx部署前端dist包
最新发布
来一颗砂糖橘
08-29 1050
nginx部署前端dist包 download > Stable version 可选择稳定版的nginx。1.将打包好的dist放入html目录下。2.打开nginx.conf配置文件。2.打开浏览器输入地址打开项目。nginx压缩包解压后的目录。1.双击启动nginx。
将Vue的dist文件部署到本地Nginx
qq_62479388的博客
11-28 943
将Vue的dist文件部署到本地Nginx
nginx运行vue项目的dist文件
honvin的博客
10-09 3991
nginx运行vue项目的dist文件，并防止刷新404
Vue 打包发布Nginx配置
qq_1336674576的博客
06-19 1458
Vue 发布Nginx配置
项目打包运行dist以及nginx配置
04-11
在IT行业中，项目打包运行和Nginx配置是两个关键环节，它们对于应用程序的部署和发布至关重要。这里我们将深入探讨这两个主题。 首先，项目打包运行通常指的是将开发完成的前端或后端应用转换为可部署的形式。对于...
flask+vue+nginx+uwsgi项目部署
weixin_45549915的博客
10-23 1153
1.背景 这次部署flask+vue项目在网上找了很多的资料，说实话我当时就特别想吐槽为什么自己部署的都不知道是什么玩意的还要写博客呢，看的我是很头疼。不过最后项目还是部署起来了，所以想着自己写一个这个博客，来帮助有需要的人。有啥不足的或者理解不到位的地方，有请各位大佬提出！ 2.项目部署前说明 本次项目采用的技术是前后端分离的部署架构，前段采用vue后端采用flask。 前端部署采用nginx后端采用uwsgi 本次主要讲解部署流程 3.前端部署 nginx下载安装：自己网上找资料，主要就是
Django + Vue 部署服务器nginx + uwsgi_nginx部署django和vue项目
m0_63174529的博客
04-21 1048
设置在平滑的重启（直到接收到的请求处理完才重启）一个工作子进程中，等待这个工作结束的最长秒数。指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？跟C,Java中的this有什么区别？跟C,Java中的this有什么区别？
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
前端在nginx上部署vue的dist包，配置跨域问题
weixin_63029264的博客
01-11 2379
一般为位置为 /usr/local/nginx/conf/ ,如果知道你服务器的配置文件位置，那我们直接切进去。这边让我们输入密码，输入密码时候是不可见的 所以输入直接敲回车 正确就直接进去了，错了就重新来过。找到nginx安装的目录下的 /sbin 文件夹，我的是在 /conf的同级目录。根据需要进行启动配置。
Linux+Nginx部署Vue项目（dist文件）
热门推荐
大能人powerman的博客
09-23 1万+
Linux+Nginx部署Vue项目（dist文件） 项目场景： 项目场景：Linux部署Vue项目 思路： 1.将Vue项目打包成dist包 2.将dist包上传到服务器 3.安装Nginx 4.配置Nginx[nginx.conf] 5.重启Nginx 操作： 1.1 打包dist文件： 【打包时遇到的问题】： 【现象】： > node build/build.js \ building for production...Error processin
Vue项目部署到Nginx服务器
极限突破者的博客
05-17 2843
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
dist包在windows的nginx下部署运行
qq_44982110的博客
04-23 993
链接：https://pan.quark.cn/s/e87bbf87a742。我用夸克网盘分享了「nginx-1.18.0.zip」
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
朱豪凯的博客
08-11 1916
介绍vue3中怎么打包，并部署到Nginx服务器上
npm打包vue项目部署到nginx
Jalen备忘录
01-17 4094
1. Build vue project，生成dist目录: npm run build   2. 下载nginx，解压，测试nginx，修改nginx.conf端口号为8082，启动nginx start .\nginx.exe   3. 访问localhost:8082如下   4. nginx测试完毕，此时将我们项目构建后的dist目录整个复制到nginx根目录的ht...
前端打包的dist文件 怎么用nginx 在 Windows 部署
wei7a7a7a的博客
07-06 1391
（如果在步骤 3 中使用了不同的域名或 IP 地址，请相应地修改 URL）。Windows 的 Nginx 安装程序，并将其安装到您的计算机上。配置 Nginx：安装完成后，在 Nginx 的安装目录中找到。要在 Windows 上使用 Nginx 部署前端打包的。下载 Nginx：首先，您需要从 Nginx 官方网站（文件后，返回到 Nginx 的安装目录，并运行。验证部署：打开您的浏览器，并访问。），并使用文本编辑器打开它。在上面的配置中，请确保将。，这是前端应用的入口文件。配置文件（默认路径为。
如何将vue项目打包在服务器上使用nginx运行，并使用反向代理解决跨域问题
bsegebr的博客
07-31 3888
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。可以改用其他端口，但是改用其他端口不方便，因为使用域名访问的话默认就是80端口，所以我们要让nginx启动在80端口，把占用80端口的程序干掉就行了。打开配置文件可以发现，里面又一个一个的server对象组成（如下），我们每次增加一个项目增加一个server就行。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值