vue编译部署+nginx

最新推荐文章于 2024-08-11 13:18:04 发布
最新推荐文章于 2024-08-11 13:18:04 发布
阅读量361 收藏
点赞数
分类专栏： nginx linux-运维 vue 文章标签： nginx linux vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34412985/article/details/107587463
版权
linux-运维 同时被 3 个专栏收录
188 篇文章 0 订阅
订阅专栏
vue
31 篇文章 0 订阅
订阅专栏
nginx
13 篇文章 0 订阅
订阅专栏

1、项目路径下vue-test输入命令npm run build
在这里插入图片描述

编译完成后会发现在vue-test文件夹下多出一个dist文件夹这里面就是编译好的文件了。
2、网上下载nginx,下载地址http://nginx.org/en/download.html，解压下载的nginx文件。
3、配置部署，编辑nginx/conf 下的nginx.conf，修改如下图：
在这里插入图片描述

4、启动nginx。命令窗口cd进入nginx安装目录，输入start nginx启动nginx。
在这里插入图片描述

然后通过浏览器访问http://127.0.0.1:8088/访问。

5、nginx停止命令：nginx -s quit
nginx重启命令：nginx -s reload

qq_34412985
关注
专栏目录
Vue项目部署到nginx
Superman_peng的博客
08-24 592
1、Vue打包 执行npm run build打包项目，可看到一个dist文件夹 2、安装nginx 请参考： docker安装与运行nginx（挂载目录） 3、将dist目录下的文件传输到/test/nginx/www/目录下 这里使用的是filella软件进行本地传输到服务器 现在进入到/test/nginx/www目录下即可看到dist目录（存放vue项目打包文件） 4、配置本项目的配置文件 进入到/test/nginx/conf.d目录下，创建本项目的配置文件，并进行配置 server
Django + Vue 部署服务器nginx + uwsgi_nginx部署django和vue项目
m0_63174529的博客
04-21 1008
设置在平滑的重启（直到接收到的请求处理完才重启）一个工作子进程中，等待这个工作结束的最长秒数。指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？跟C,Java中的this有什么区别？跟C,Java中的this有什么区别？
vue学习-打包编译，部署到服务器
qq_43368682的博客
08-28 374
打包 首先设置其读取资源时是在相对路径 增加vue.config.js module.exports={ publicPath:'./' } 然后使用npm run build打包 打包后 部署到服务器 1、创建serve文件夹 app.js let express=require('express') let app=express() app.use(express.static('static')) app.listen(3000,()=>{ console.log("服
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
最新发布
朱豪凯的博客
08-11 1483
介绍vue3中怎么打包，并部署到Nginx服务器上
VUE部署到nginx
LEVsunshine的博客
10-14 802
标题将vue项目部署到nginx 1、vue项目打包 执行： npm run build 之后会出现一个dist文件， 打包后的静态文件会输出到dist文件夹中 将dist文件压缩为zip文件 2、上传主机 cd到需要文件夹后新建目录 mkdir ngTest cd到当前目录 cd ngTest 上传dist文件（或点上传按钮） rz 解压dist文件 unzip dist.zip 新...
Vue项目部署（Nginx）
热门推荐
weixin_42067873的博客
09-05 1万+
vue项目部署
Vue项目部署到Nginx服务器
极限突破者的博客
05-17 2712
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
vue+springboot+mysql+nginx的网盘系统，脚本部署实例
07-23
Nginx则作为一个高性能的反向代理服务器，常用于部署和优化Web应用。本项目是一个整合了这些技术的网盘系统，提供了便捷的部署脚本，免去了开发者安装和配置JDK、MySQL、Nginx等基础环境的繁琐步骤，适用于任何基于...
springboot+vue+nginx完整demo代码
03-14
在本项目中，Nginx可能被配置为前端服务器，处理静态资源（如Vue编译后的JS、CSS文件）并代理到Spring Boot应用的API。 【整合】在本项目中，Spring Boot作为后台服务，处理业务逻辑和数据操作；Vue.js作为前端框架...
Vue项目部署Nginx配置文件 SSL
08-11
当你的 Vue 项目完成开发并经过 `npm run build` 编译后，生成的静态资源需要部署到服务器上供用户访问。Nginx 是一款高性能的 HTTP 和反向代理服务器，常被用来部署 web 应用，包括 Vue 项目。SSL（Secure Sockets ...
vue项目部署到nginx服务器
weixin_43487252的博客
05-23 1万+
相信很多刚学习vue的朋友都可以进行到将vue项目进行npm run build这部，对于将build后的结果部署到nginx服务器上却一知半解，作者刚开始的时候也是很迷惑，看到网上很多朋友在问，今天作者就将自己的部署过程记录下来，供大家参考。 首先将开发完成的vue项目打包 // 在终端中cd到项目目录下 cd /usr/local/project // 进行项目构建（可在本地构建） np...
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
Vue（六） Nginx项目部署
Hello World!
05-26 4404
Nginx 是一个轻量级、高性能的HTTP和反向代理web服务器。作为一个 HTTP Server ，其主要关心的是 HTTP 协议层面的传输和访问控制，监听相应的地址和端口，对客户端的HTTP资源请求进行响应、转发或处理，但是一个 HTTP Server 能做的始终只是把服务器上的静态资源如实的通过 HTTP 协议传输给客户端...
vue 编译之后的，用nginx启动
weixin_42284453的博客
08-24 479
1，vue 编辑，我现在用的还是vue2.0，编译用的最直接的 npm run build 2.编译之后生成 dist文件 3.安装nginx ，我用的是mac，执行命令 brew install nginx 中途有n多坑。先略过 4.nginx -v 查看安装的nginx 的版本号 5。执行 nginx 命令 ,启动nginx 服务 6. 执行 nginx -s reload ，重启nginx 服务 7. 执行 vim /usr/local/etc/nginx/nginx.conf 编辑ngi
Vue项目编译后部署在非网站根目录的解决方案
qq_33834489的博客
12-03 1048
https://juejin.im/post/5ae03b98f265da0b8e7f1251 背景 同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。 eg. ： vue-router: history模式 内网环境：192.168.1.1:8080/index.html 外网环境：domain.com/ttsd/index.html...
vue安装+部署到nginx中
qq_17525509的博客
09-21 832
本章讲述windows系统如何安装vue并且配置到nginx环境下 一、安装nodejs 官网：Node.js 下载完成后需要记住安装的路径,其余直接下一步即可 我安装的路径是D:\nodejs 二、设置node_global和node_cache 1.在安装的nodejs根目录下新建node_global和node_cache 2.新建后需要设置两文件分别执行 npm config set prefix "D:\nodejs\node_global" npm config set.
vue项目如何部署到nginx服务器
bg22223的博客
05-03 2604
http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - remoteuser[remote_user [remoteu​ser[time_local] “$request” ’ '$status bodybytessent"body_bytes_sent "bodyb​ytess​ent"http_referer" ’ ‘“httpuseragent
Vue前端部署：详解Nginx配置与步骤
本文档主要介绍了如何在Vue前端项目中部署使用Nginx进行静态资源托管。部署流程主要包括以下几个步骤： 1. **确认Nginx配置完毕**：首先，确保Nginx服务器已经正确安装并配置好，通常情况下，Nginx作为反向代理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值