2022-07-17 vue项目-通用后台管理系统(十三) 将vue项目部署到nginx服务器上,宝塔面板介绍和使用

已于 2023-03-30 20:05:58 修改
阅读量561 收藏
点赞数
分类专栏： vue项目-通用后台管理系统 知识点 文章标签： 服务器 vue 宝塔面板 nginx 前后端交互
于 2022-07-17 23:52:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rowlet/article/details/125839343
版权
本文介绍了如何将Vue项目打包并部署到Nginx服务器，特别是针对window环境的操作步骤，包括项目打包、将dist文件复制到Nginx的HTML文件夹、启动Nginx服务器以及配置nginx.conf。此外，还详细讲解了如何使用宝塔面板进行服务器管理和Vue项目部署，包括宝塔面板的下载、安装、登录以及选择安装套件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一.vue项目打包并部署到nginx服务器(window环境)

1.项目打包
对于通过vue-cli脚手架创建的项目

(*还有通过webpack创建的vue项目)
在项目的vue.config.js中补充如下代码:

    assetsDir: 'static',
    parallel: false,
    publicPath: './',
在根目录cmd,并输入打包命令

在项目根目录中cmd,然后输入命令:npm run build
生成dist文件夹
打包前:crm文件夹 158Mb
打包后:dist文件夹 6.4Mb

2.nginx的html文件夹下粘贴打包好的项目文件

在这里插入图片描述

3.在有nginx.exe的页面cmd,输入命令开启服务器

在这里插入图片描述
输入命令:start nginx,
打开浏览

最低0.47元/天 解锁文章
阿里云使用宝塔+nginx部署vue项目
hope2019的博客
06-05 2705
宝塔部署vue项目
使用宝塔面板中的Nginx部署前端Vue项目
m0_74825718的博客
12-19 1190
我相信已经到这一步了，Nginx和宝塔过多的描述我就不说了，直接上干货实操。
vue项目部署到服务器上
祈澈菇凉
08-25 7148
在前面的文章里面，自己做了一个练手的小项目，买了服务器之后，也对linux的命令有了初步的认识和理解，现在开始把做好的项目部署到服务器上，通过域名来访问。 Vue项目从搭建环境到打包上线 https://www.jianshu.com/p/7791bf749f66 1：使用npm run build进行打包 打包完成显示 这个时候可以看到项目里面多了一个...
云服务器安装宝塔并部署 Nginx（前端 + 反向代理）
最新发布
weixin_70845865的博客
03-28 1086
1.云服务器安装宝塔 2..云服务器配置（Docker 部署后端） 3.云服务器通过宝塔部署Nginx（前端 + 反向代理）
将VUE项目部署到服务器
热门推荐
m0_54435287的博客
06-05 1万+
将多个vue项目部署到服务器，用IP地址访问
Vue项目部署到服务器
最爱吃大米的博客
07-19 1616
前言 vue项目的创建请自行百度，vue部署到服务器一般需要一些容器来安装，本文采用Nginx的方式 Nginx的具体安装方式参考：(35条消息) 阿里云ECS服务器安装Nginx_最爱吃大米的博客-优快云博客 1.vue项目打包 npm run build 具体方式参照自己的package.json文件方式 等待片刻。。。。。。。 打包完成，此时会在你的项目根目录下生成一个dist文件 2.上传文件到服务器 使用 xftp工具 或者 rz命令进行上传 3.启动项目 由于项目是基于nginx部署，此
vue前端项目部署之nginx配置.md
03-20
本文将详细介绍如何使用Nginx作为反向代理服务器来部署Vue前端项目，包括具体的步骤以及需要注意的关键点。 #### 二、确认Nginx配置完毕 在开始部署之前，首先要确保Nginx已经正确安装并配置好。可以通过以下方式...
服务器中用宝塔7.9面板配合Nginx部署springboot+vue前后端分离项目—超详细(包含项目打包方法)
Amy_Victoria的博客
04-20 5743
服务器中用宝塔7.9面板配合Nginx部署springboot+vue前后端分离项目—超详细(包含前后端项目的打包方法)
vue项目部署到服务器
strivew的博客
04-19 5094
vue项目启动和打包部署到服务器
将Vue项目部署至服务器（一）
小hu同学
02-17 1610
在开发完成后如何进行打包并部署本地服务器呢？ 一、首先打开你需要部署的项目 我这里使用vscode软件 打开一个新的终端 打开后在下面命令行进入该项目目录文件进行
部署Vue项目到云服务器
qq_27846423的博客
06-12 543
在本地进入你的项目目录，打开控制台，输入运行完成后会出现一个名为dist的文件夹，这个就是你要上传给服务器的。
前端VUE项目部署到服务器
weixin_44917754的博客
01-04 9772
前端VUE项目部署到服务器 具体步骤： 一、先运行前端VUE项目的“build”任务，会得到一个“dist”打包文件。 二、在项目文件夹同级目录下新建文件夹“XXX_severe”。例如我的项目名称为“shop”，那么我在与“shop”同级目录下新建一个叫“shop_server”的文件夹。创建好之后用VScode打开。 三、在VScode中打开终端（Ctrl+Esc下方的键），在终端中运行npm init -y,然后运行npm i express -s,可以看到此时文件夹中多了一几个文件： 将“dist
项目部署——Vue项目部署到云服务器(linux)
qq_53008257的博客
05-26 1万+
因为期末了，要检查web大作业，虽然没有要求，但我想把项目部署一下，以免每次都要打开运行了，部署过踩了许多坑，这里总结一一下这次部署的流程吧。项目我个人进行前后端分离的全栈开发，有后台，后台部署的过程由于篇幅原因将在下一篇中讲解 准备工作 准备一台虚拟机或者云服务器（linux系统） 首先，由于真实的项目基本上都部署在linux系统上，因此为了贴近真实，我们需要准备一台带有linux系统的虚拟机或者云服务器，由于虚拟机不能在自己的电脑关机了以后继续运行，因此这里推荐云服务器，目前用过阿里云，腾讯云两款云服务
服务器部署vue项目
dark_world的博客
06-06 1066
linux安装nginx，并部署vue项目
宝塔面板部署vue项目到nginx
07-28
您可以按照以下步骤将Vue项目部署到Nginx上： 1. 首先确保您的Vue项目已经完成构建，生成了`dist`文件夹。 2. 登录到您的宝塔面板，并选择需要部署的网站。 3. 在网站设置中，找到并点击“Web服务”选项。 4. 在“反向代理”栏目下，点击“添加反向代理”。 5. 在弹出的窗口中，填写以下信息： - 目标URL：http://localhost:8080 （假设您的Vue项目运行在本地的8080端口） - 目标主机：127.0.0.1 - 目标端口：8080 6. 点击“添加”，然后保存设置。 7. 返回到网站设置页面，找到“网站目录”，将其改为Vue项目的`dist`文件夹路径。 8. 点击“保存”进行保存设置。 9. 现在您的Vue项目已经部署到了Nginx上。可以通过访问您的网站域名来查看效果。 请注意，这只是将Vue项目部署到Nginx上的一种方法，您还可以使用其他方法进行部署，如通过配置Nginx的`nginx.conf`文件来实现。具体方法可以根据您的需求和环境进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端OnTheRun

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

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

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

打赏作者

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

抵扣说明：

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

余额充值