VUE学习三、前端项目部署

超详细SpringBoot+Vue项目部署(两个Vue项目) 阅读详情

1.前端项目打包

执行命令

npm run build:prod

正常命令结束 , 会在前端项目里面出现dist文件夹
在这里插入图片描述
在这里插入图片描述

2.nginx下载安装

nginx下载 : http://nginx.org/en/download.html
Windows 下载版本

Mainline version:Mainline 是 Nginx 目前主力在做的版本,可以说是开发版
Stable version:最新稳定版,生产环境上建议使用的版本
Legacy versions:遗留的老版本的稳定版

在这里插入图片描述
在这里插入图片描述
下载后 , 修改conf文件夹中的nginx.conf文件

修改文件前 我们先把上面打包的dist文件夹 , 复制到nginx文件夹html里面(也可以不复制,直接使用dist路径)
在这里插入图片描述

3.nginx.conf文件配置

在这里插入图片描述
完整代码如下:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;
		charset utf-8;

   location / {
            root   html/dist;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
		
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8080/;
		}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

保存后 , 启动ng
在这里插入图片描述
访问连接 127.0.0.1

在这里插入图片描述
至此 前端项目部署成功
至于后端就更简单了 直接打成jar包 java -jar跑起来

yum安装nginx,并部署前端vue项目到虚拟机上运行 yum安装nginx,并部署前端vue项目到虚拟机上运行 1.搜索一下有没有nginx,命令如下 yum search nginx2.查询nginx要安装的版本,命令如下 whereis nginx3.安装nginx,命令如下 yum install nginx.x86_644.移除nginx,命令如下 yum remove nginx5.打开目录,命令如下 cd /usr/sbin 6.启动,命令如下 ./nginx7.查看nginx进程,命令如下 ps -aux |grep nginx ....... 阅读详情

相关推荐

Vue框架部署、项目构建与后端交互详解

在Vue项目中,通过安装Vue Router并进行简单配置,可以实现路由的跳转和管理。本文将详细介绍如何部署Vue框架,进行项目构建,并深入讨论前后端交互的方法。文件),将模板、脚本和样式组合在一个文件中,使得代码更加模块化和可维护。Vue CLI是Vue.js的官方脚手架工具,用于快速搭建Vue项目。在开发中,前端通常运行在不同的端口或域名下,需要处理跨域。Vue项目的目录结构是一个关键因素,有助于代码的组织和维护。文件),其中包含了模板、脚本和样式,使得组件的代码更加模块化和可维护。

2301_78150212的博客 1843

VUE项目部署

快速部署vue项目

qq_51725978的博客 2万+

【前端部署】Ubuntu22.04 使用nginx部署vue前端项目教程

一般情况下,我们是不会去修改nginx原有的配置文件内容,而是另外添加一些关键的文件,使得nginx在运行的时候顺带执行咱们添加的文件来完成相应的功能。下的所有文件,这样当然也就顺便把文件myweb.conf加载啦,而myweb.conf文件存放的是我们部署的前端代码文件的一些信息,这样nginx就能加载到咱们的前端代码啦。有足够权限访问当前ubuntu用户目录下的前端文件(因为本人是把前端文件的路径添加在当前ubuntu用户目录下的)。下的所有以.conf结尾的文件都复制到这里,而路径。

m0_74824574的博客 1398

Vue前端项目部署的三种方案

Nginx(发音为“engine-x”)是一款高性能的 HTTP 服务器和反向代理服务器,同时也是一个IMAP/POP3/SMTP 代理服务器。Nginx最初由 lgor Sysoev 编写,于 2004年发布。反向代理负载均衡静态内容服务HTTP/2 支持SSL/TLS 支持高速缓存。

前端工程师 · Vue 生态深耕者,专注多端与工程化 1万+

OpenFOAM-v2006重叠网格挖洞问题实战:如何手动修复overset代码中的边缘识别缺陷

本文深入探讨了OpenFOAM-v2006中重叠网格挖洞问题的实战解决方案,重点修复overset代码中的边缘识别缺陷。通过逆向工程解析挖洞决策机制,设计最小侵入式的函数override方案,并建立多级验证体系,有效解决了网格挖洞区域覆盖不全的问题,提升了计算流体动力学模拟的准确性和可靠性。

weixin_29216049的博客 433

聚类教程:cisTopic——来自单细胞表观基因组学数据的顺式调控主题的概率建模

之前运行这步的时候报错了如下: 后来发现原因是Ubuntu自动把R包更新到4.2版本,但是Rstudio版本没有更新,更新Rstudio即可,更新Rstudio的教程看此教程:。

watermel__的博客 1051

nginx 部署前端vue项目

Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡。优点支持海量高并发:采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接,实际生产环境中可以支撑2-4万并发连接数。内存消耗少可商业化配置文件简单 除了这些优点还有很多,比如反向代理功能,灰度发布,负载均衡功能等。

我哎GIS博客 3万+

MATLAB新手必看:SVPWM七段式算法仿真全流程解析(附完整代码)

本文为MATLAB新手和电机控制初学者提供了SVPWM七段式算法的完整仿真与代码实现指南。文章详细解析了从扇区判断、矢量作用时间计算到PWM波形生成的全流程,并附带了可直接运行的MATLAB代码,帮助读者在理解FOC控制核心算法的基础上,快速掌握工程仿真与调试技巧。

weixin_29074295的博客 281

Nginx 部署前端 Vue 项目实战指南

在执行此命令之前,需要确保路由配置中的模式正确。修改完成后,保存配置文件,并在命令行中执行相应命令重启 Nginx 服务。您可以从 Nginx 官方网站下载安装包,然后按照安装向导进行安装。,回车,即可启动 Nginx 服务。可以在任务管理器的进程中看到启动的 Nginx 服务。从 Nginx 官方网站下载安装包,按照安装向导进行安装。另外,还需要对项目中的一些配置文件进行修改,比如在。要修改 Nginx 的配置文件,例如修改端口,可在。指令,将默认的 80 端口修改为您想要的端口,如。

四楼没电梯的专栏 3251

在Unity3d使用yolov8的onnx模型

输出OUTPUTS是float32[1,35,8400],表示它会输出一个大小为[1, 35, 8400]的浮点数张量。这个输出张量的维度表示了检测到的目标的数量、每个目标的预测参数以及网格单元的数量。输出张量的第一个维度1表示检测到的目标数量。每个目标由35个值组成,表示目标的类别、置信度、边界框的坐标及10个特定点的位置。要取得8400个数据中置信度最高的数据,然后获取该数据其他channel的数据。运行结果:(蓝色是检测手的边框,红点是自定义的点),其中的四个数字分别表示不同的维度。

shenqingyu0605202324的博客 5603

《QEMU/KVM源码分析与应用》读书笔记1 —— 第1章 QEMU与KVM概述

《QEMU/KVM源码分析与应用》学习笔记1 —— 第一章 QEMU与KVM概述

phmatthaus的专栏 1984

【Nginx 】Nginx 部署前端 vue 项目

在项目部署之前,确保开发环境中已安装Node.js和npm,这是运行Vue项目的基础。通过执行命令,可以安装项目所需的所有依赖。这一步是打包流程的前提,确保了后续编译的顺利进行。根据npm的官方数据,命令在安装依赖时,会根据文件中列出的依赖项进行下载和安装,这个过程通常需要联网操作,并且依赖于npm仓库的响应速度。在网络状况良好的情况下,安装过程可以顺利完成。

衍生星球的博客 1万+

PCIE2.0/PCIE3.0/PCIE4.0/PCIE5.0接口的带宽、速率计算

一、PCIE接口速率: 二、PCIE相关概念: 传输速率为每秒传输量GT/s,而不是每秒位数Gbps,因为传输量包括不提供额外吞吐量的开销位; 比如 PCIe 1.x和PCIe 2.x使用8b / 10b编码方案,导致占用了20% (= 2/10)的原始信道带宽。 GT/s —— Giga transation per second (千兆传输/秒),即每一秒内传输的次数。重点在于描述物理层通信协议的速率属性,可以不和链路宽度等关联。 Gbps —— Giga Bits Per Second

技术联盟 1万+

Nginx部署前端Vue项目的深度解析

学习目标:了解如何用Nginx部署前端Vue项目

来自想要赚大钱的小周同学 2万+

PCL 模型滤波器【2025最新版】

根据给定的模型系数在点云中提取对应于模型的点云数据。博客长期更新,本文最新更新时间为:2025年6月17日。

点云侠的博客 4384

【全局路径规划模块运动学算法】无人机Kinodynamic A*算法、Kinodynamic RRT*算法(附C++代码)

认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长!本文先对Kinodynamic A*算法做个简单的介绍,具体内容后续再更,其他模块可以参考去我其他文章提示:以下是本篇文章正文内容啃这个Kinodynamic A_star算法,建议先啃一啃高飞fast_planner那篇论文,把理论打好,如果还是比较迷,就先看Dijksta、再看A_star、再看hybrid A_star 三个的流程,因为往上资料比较多,再看这个Kinodynamic A_star算法,流程已经很相像了。如果。

qq_35635374的博客 2602

nginx部署前端vue项目

Nginx(发音为“engine-x”)是一个高性能的HTTP和反向代理服务器,同时也提供了IMAP/POP3/SMTP代理服务器的功能。由俄罗斯程序员Igor Sysoev开发,并于2004年首次公开发布。Nginx以其高稳定性、丰富的功能集、简单的配置和低资源消耗而闻名。高性能:Nginx能够处理大量的并发连接和请求,而不会显著增加系统资源的使用。高可靠性:Nginx的设计注重稳定性,即使在高负载下也能保持稳定运行。模块化:Nginx具有高度模块化的设计,允许通过安装额外的模块来扩展其功能。

Python老吕的博客 4584

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

Nginx部署前端Vue项目详细教程

通过以上步骤,你可以在Nginx服务器上成功部署Vue项目。这个过程包括打包Vue项目、安装和配置Nginx、上传项目文件、设置文件权限以及(可选的)配置SSL。Nginx作为高性能的Web服务器,结合Vue的前端路由和静态文件服务,能够为用户提供流畅和安全的访问体验。

蜡笔小新星的博客 3563

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

nginx部署前端vue项目步骤

Vue项目的部署:Tomcat、Ngnix

警警的博客 4114

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Docker容器部署前端Vue项目【保姆级教学】

从项目打包、配置nginx.conf文件、再到Docker安装Nginx、以上就是Docker部署前端Vue项目的全部内容。上面步骤都是一步步验证过的,按照流程走基本没问题。

qq_58195504的博客 6625

《使用 Nginx 部署前端 Vue 项目》

通过合理配置 Nginx,可以实现高性能的静态资源服务、反向代理和负载均衡等功能,为 Vue 项目的部署提供了强大的支持。在部署过程中,需要注意 Nginx 的安装与配置、Vue 项目的构建与优化以及常见问题的解决方法,以确保项目的顺利部署和稳定运行。随着前端技术的不断发展,Nginx 和 Vue 的结合将为开发者带来更多的便利和可能性。本文将详细介绍如何使用 Nginx 部署前端 Vue 项目,包括 Nginx 的安装与配置、Vue 项目的构建与优化以及部署过程中的常见问题与解决方法。

weixin_47266126的博客 1983

Vue项目部署到云开发前端网页托管|unicloud版

当我们想要部署我们的`前后端分离项目`,由于我们又不想花RMB去购买专用的服务器,而`内网穿透`免费的一次只能穿透一个端口,怎么办呢????️,小编以前学云开发的时候经常使用前端网页托管,今天给分享大家,实现前后端分别部署:前端`Vue`项目(部署到前端网页托管,会生成一个临时的公网访问域名,当然有自己的域名可以进行绑定)、后端`Spring Boot`项目(使用`内网穿透`部署在本机);

Evan Liu的博客 3864
上一篇: VUE学习二、创建一个前端项目
下一篇: Java基于JWT实现Token登录验证+自定义异常
TimerShaft
博客等级 码龄8年 33粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值