记录Vue前端项目部署

最新推荐文章于 2024-07-02 22:05:51 发布
最新推荐文章于 2024-07-02 22:05:51 发布
阅读量345 收藏 2
点赞数 2
分类专栏： # Vue.js 文章标签： vue.js 前端 nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dust__/article/details/120997397
版权

文章目录

一、关于nginx

后续更新…

二、部署Vue项目

1.打包Vue项目

执行命令：

	npm run build

生成文件:
在这里插入图片描述

2.安装nginx

官网下载：下载链接
在这里插入图片描述
此处选择了稳定版1.20.1版本
安装包文件:
在这里插入图片描述

3.开启nginx

（1）在cmd中指定到安装nginx的文件夹下

使用快捷键：Win+R
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

开启nginx：

	#先关闭nginx
	nginx -s stop
	#开启nginx
	start nginx

在这里插入图片描述

4.修改nginx配置

在这里插入图片描述

（1）修改端口

在这里插入图片描述
默认端口为80端口，最好修改为其他端口号；

（2）指定Vue打包文件

Vue打包文件：
在这里插入图片描述
nginx中设置vue指定文件:
在这里插入图片描述
注意：
在指定打包的Vue文件时，不要在有汉字的文件夹下存放，否则会无法访问；
提示这个错误：No mapping for the Unicode character exists in the target multi-byte code page

（3）设置后台端口

在这里插入图片描述
此项目中后台程序是在IIS上部署的端口为8011；

三、参考文档

https://www.cnblogs.com/jackson-yqj/p/10273331.html
https://www.cnblogs.com/jackson-yqj/p/10273352.html

Dust_SongYunfei
关注
专栏目录
前端项目（vue3）自动化部署（Gitlab CI/CD）尚在完善中---＞
分享式获得也是一种学习的态度
03-15 2815
正常部署前端项目时需要先打包后放到服务器上进行手动部署，现在我们尝试用Gitlab的CI/CD功能来实现自动化部署前端项目，节省部署操作时间以及避免过程中操作失误的可能。系统：linux centos。
快速部署Vue.js前端项目
chizichao8的博客
03-31 595
在本教程中，我们一起学习了从购买服务器、配置服务器和项目到最终成功上线项目，作者不得不感叹随着时代的发展，前端框架已经产生了质的飞跃，如今前后端分离可以大幅减轻服务器压力，而基于MVVM模型的Vue框架也使得我们的开发效率更高，开发人员可以更加专注数据的获取和展示，减小开发成本和压力。最近腾讯云新上架了一批轻量应用服务器，为您提供多款型号选择，以实惠的价格为您提供稳定、高效的运行环境，本文我们选用33元/月的配置来完成教程。本文教程使用腾讯云服务，以Centos7系统为例，使用宝塔面板进行管理。
vscode启动vue项目时，内存溢出
weixin_48909429的博客
12-07 3300
解决方案：1.重点！！！ 首先尝试更换node.js 版本，尝试重新 并且 2.如果方案以没有解决，则再尝试使用启动时加大内存的方案1、启动时加大内存， vue-cli2：npm run dev 和 npm run build 直接在前面加上–max_old_space_size=4096 vue-cli3： scripts中添加一句指令 安装两个npm包 ： increase-memory-limit 和cross-env 安装完成后，先执行一次 npm run fix-memory-li
如何快速部署vue项目
qq_43558959的博客
07-02 2593
如何快速部署自己的vue项目呢，读完这篇文章你应该可以获得自己想要的答案
Vue前端项目部署
兴奋的大骆驼
11-23 860
Vue前端项目部署。
前端vue项目部署
qq_43532386的博客
11-22 1274
1、Dockerfile创建镜像 # 安装centos环境 FROM centos:7 RUN yum -y update \ && yum -y install vim \ && yum -y install git \ && curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash \ && source ~/.ba
Vue前端项目部署的三种方案
qq_44741577的博客
05-27 6684
Nginx(发音为“engine-x”)是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个IMAP/POP3/SMTP 代理服务器。Nginx最初由 lgor Sysoev 编写，于 2004年发布。反向代理负载均衡静态内容服务HTTP/2 支持SSL/TLS 支持高速缓存。
vue前端部署流程
bihuadashuju的博客
06-20 1289
package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。原因：为 Node.js 版本是 17 以上所以会运行失败， Node.js 17 版本中最近发布的。这里出现了特别多的warning，多是包版本和函数版本的问题，先不管它。2、在vue项目所在目录的路径框架中输入cmd，清除npm缓存。方法二：检查node与node-sass版本是否正确，在。
Vue+Django项目部署详解
10-16
Vue+Django项目的部署涉及到多个步骤，包括本地项目配置、前端构建、服务器环境准备和数据库配置等。这里我们将深入探讨这些关键环节。...理解并掌握这些步骤对于任何开发者来说都是提高项目部署效率和维护性的关键。
前后端分离-IIS部署Vue前端项目
by0920的博客
03-07 1万+
背景： 项目采用前后端分离技术，后端主要用springBoot+springCloud等技术，前端采用Vue。部署中遇到了种种问题，尤其是前端部署中，以下是采用IIS部署的详细步骤，以及问题的解决方案，希望能帮助到大家。后端运行步骤在另一篇文章中有记载，查阅：https://blog.csdn.net/by0920/article/details/87911408 首先，编写前端代码，安装no...
如何进行vue项目的部署
热门推荐
weixin_44382147的博客
11-30 2万+
如何进行vue项目的部署 如何进行vue项目的部署前言部署方案方式1实现方式2实现 前言 在一开始接触vue尤其是初次进行打包后，我就有一个疑问，vue项目是怎么进行部署的？直接点开打包后的 index.html 后会得到下面的报错 这里页面发送的请求不是我想象中的http://ip:port/api/api1的格式，而是file:////盘符:/api/api1的格式，这意味着index.html就只是一个html文件，打包只是把vue文件做了压缩处理。 这里就有一个疑问了，因为前后端分离，我在项目中
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
vue前端项目部署之nginx配置.md
03-20
vue前端项目部署之nginx配置。
spring boot项目和vue一起放在tomcat部署
11-13
"Spring Boot 项目与 Vue 一起部署到 Tomcat 服务器" 在本文中，我们将介绍如何将 Spring Boot 项目和 Vue 一起部署到 Tomcat 服务器中。这个过程需要我们对 Tomcat 服务器进行配置，以便能够正确地部署并运行我们...
vue部署前端项目
qq_41820599的博客
05-27 150
1.npm run build 注意 报错npm ERR! missing script: build 需要改成npm run build:prod 2.获取dist文件，进入dist文件执行npm install live-server -g 再执行live-server
VUE项目部署
qq_51725978的博客
07-26 2万+
快速部署vue项目
前端Vue项目部署到服务器过程，以及踩坑记录
m0_56698268的博客
10-15 8842
前端vue，后端java的项目，部署到服务器过程记录 安装nginx，nginx反向代理，服务器404和500报错
前端部署 Vue项目
m0_51534164的博客
03-24 1111
前端项目部署 nginx vue项目
前端vue项目如何部署
最新发布
08-21
部署前端Vue项目通常涉及以下步骤： 1. 打包项目：首先，你需要确保项目能够正确打包。使用Vue CLI创建的项目，通常通过运行`npm run build`（或`yarn build`）来生成一个`dist`目录，里面包含了静态资源文件。 2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值