阿里云使用宝塔+nginx部署vue项目

最新推荐文章于 2025-03-26 21:35:09 发布
最新推荐文章于 2025-03-26 21:35:09 发布
阅读量2.6k 收藏 20
点赞数 3
分类专栏： Vue 文章标签： nginx vue.js 阿里云
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hope2019/article/details/125133164
版权
本文介绍了如何在阿里云服务器上，通过安装CentOS7.6，设置安全组，安装宝塔面板，然后部署Vue.js项目。步骤包括购买服务器，安装必要软件，使用npm run build打包Vue项目，通过宝塔面板添加站点，上传并配置dist文件，最终实现通过域名访问Vue应用。

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

1. 购买阿里云服务器，安装centos7.6操作系统，并设置安全组，确保一些必要的软件的端口放行，如mysql, nginx等等

2. 安装宝塔面板

3. 登录宝塔面板后选择左侧一键安装必要软件（重要，php什么的一定要安装）

---------------------------------------------------------------------------------------------------------------------------------

以上三步自行找网上教程按步骤来进行设置！！！

---------------------------------------------------------------------------------------------------------------------------------

4. 在本地中使用npm run build打包vue项目，并将最终生成的dist文件压缩为rar或zip文件

5.在宝塔面板左侧点击网站--》添加站点

6. 站点添加成功后，点击下面方框（注意以下图片是采用我自己.org.cn的域名已创建好的站点讲解的，上面www.xxx.com只是给一个例子，并没有提交，所以后面图片中目录名是.org.cn/）

最低0.47元/天 解锁文章
使用宝塔面板中的Nginx部署前端Vue项目
anle的博客
04-12 3099
​我相信已经到这一步了，Nginx和宝塔过多的描述我就不说了，直接上干货实操。
2022-07-17 vue项目-通用后台管理系统(十三) 将vue项目部署到nginx服务器上,宝塔面板介绍和使用
GAARA
07-17 550
一.vue项目打包并部署到nginx服务器(window环境) 1.项目打包 对于通过vue-cli脚手架创建的项目 在根目录cmd,并输入打包命令 2.nginx的html文件夹下粘贴打包好的项目文件 3.在有nginx.exe的页面cmd,输入命令开启服务器 4.其他 把dist文件中的文件粘贴到HTML文件夹下面 配置nginx 配置结束后重新加载 二.使用宝塔面板部署vue项目 1.宝塔面板介绍
Vue前端项目部署到宝塔面板的详细过程
qq_73427280的博客
03-15 1781
本次以SmartAdmin的项目为例，通过宝塔面板部署，对部署过程进行一个完整演示，不同项目的部署也可能略有不同。过程仅为参考。
阿里云服务器Ubuntu通过宝塔搭建网站详细教程
最新发布
weixin_39255905的博客
03-26 1060
前言域名申请：域名申请工作几年了，最近又买了个云服务器搭着玩一玩，在这里记录下搭建云服务器的过程，以及各种基础环境配置，可供初学者学习搭建云服务器的过程，服务器购买连接 专享服务器-阿里云。今天尝试购买了阿里云服务器，因为公司采用的是Ubuntu系统，所以也尝试用Ubuntu系统来作为服务器的系统，搭建网站的过程也碰到了很多问题，这个博客就记录一下自己搭建网站的过程。首先登录阿里云的官网 阿里云官网 我是购买的这款2核2G，40G硬盘存储空间99元一年的产品 我下面这张图是购买后的价格，也就是说99元算是
多个vue项目部署到nginx服务器
qq_43548590的博客
09-07 1812
在同一域名下。多个项目部署到nginx服务器。
宝塔面板部署vue项目到云服务器上（Nginx服务器）
TGA麻辣香锅的博客
08-27 5561
前言： 之前使用终端安装nginx，后来崩了 因为自己宝塔也安了 后来服务器重装 决定只用宝塔的nginx部署 步骤： 1.填加站点 2.第一行随便写一行域名 后面删掉就行 第二行ip：端口 php版本选纯静态 如果是java后端项目 3.将打包好的dist文件上传到根目录里（也就是vue.come下） 4.关键之处来了！！！！ 根目录一定要修改成dist下，而不是原本的vue.com 不然页面根本渲染不出来 5.配置后端接口 找到配置文件 这是前端的接口 后端的项目接口如下 我是api 要实
一个nginx小白的vue项目部署的成功！
qq_45737678的博客
09-25 1593
nginx部署vue
宝塔nginx配置，部署vue打包后的项目，学习记录
stud_ying的博客
03-27 4083
nginx配置 vue.config.js router.js
阿里云ECS部署Spring Boot+Vue项目【宝塔面板】
Glubin的博客
07-01 1232
教程基于宝塔面板，在购买服务器选择镜像时，需要选择带有宝塔面板的镜像，也可以自己装宝塔面板，安装教程可以查看。
vue + koa + 阿里云部署 + 宝塔—阿里云宝塔配置使用说明
weixin_44384273的博客
02-26 1273
vue + koa + 阿里云部署 + 宝塔—阿里云宝塔配置使用说明
vue前端项目部署之nginx配置.md
03-20
vue前端项目部署之nginx配置。
nginx下部署vue项目的方法步骤
09-29
主要介绍了nginx下部署vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
阿里云部署一个vue+axios+nodejs+mysql项目(使用宝塔面板配置)
qq_42014236的博客
02-25 4612
使用阿里云部署vue+axios+node.js+mysql的项目(借助宝塔面板完成部署) 1. 购买阿里云 购买阿里云的步骤我就不过多解释，告诉一下大家我选择的配置 简单说一下，企业中使用最多的都是centos的系统，至于版本，不要选择太低，好像在宝塔面板中处理centos5.x的版本非常费劲。这里我们就选择的7.7的版本，因为我买的时候没有截图，我这边就重新截图了一张老用户的价格，我买的时候...
阿里云服务器部署flask+vue项目教程
Time_Remains的博客
07-20 1514
阿里云服务器部署flask+vue项目教程 搭建环境简介 python环境3.7.3 数据库为SQlite nginx gunion 阿里云系统环境为centos7.6 安装宝塔 yum install -y wget && wget -O install.sh python3环境安装 因为centos7自带python环境为python2.远程连接进入服务器，直接输入python命令，即可见python版本，现在我们首先要安装python3，此处安装版本为python3.7.3. #
nginx 配置多个vue项目（nginx下多个项目 根据/path 找到对应项目）笔记记录
weixin_38069018的博客
03-16 386
nginx根据/path 配置多个项目
华为云云服务器评测 宝塔+nginx 同时部署Springboot、Vue项目
Java 技术专栏，从入门到精通，熟悉企业级开发
09-03 5655
本文介绍了在Ubuntu系统里，利用宝塔安装nginx、修改nginx配置、配置nginx本地代理、使用终端、编译Vue项目、 运行Vue项目、编译Springboot项目、运行Springboot项目等内容。使得Vue项目、Springboot项目，在云服务器只开放80端口的情况下，可以同时部署运行，其他更多的服务，也可采用同意的方式配置。
宝塔多个history模式vue项目的nginx配置
ywh22122的博客
03-31 1854
宝塔上多个history模式vue项目的nginx配置要求：在同一个域名下nginx配置多个*（history模式）vue项目vue项目中配置：nginx中配置：服务器中文件目录： 要求：在同一个域名下nginx配置多个*（history模式）vue项目 例如：域名为 https://ceshi.com 配置两个项目访问路径：1.https://ceshi.com/main 2.https://ceshi.com/activity vue项目中配置： 修改路由配置 const createRouter
Vue项目宝塔面板安装一站式部署到服务器
XIAOAIZXLQ的博客
04-27 1617
vue项目打包配置问题，稍有不对，部署到服务器会出现意想不到的问题Nginx的配置，如果没有配置好，会出现苦恼的现象，如：后端接口访问错误、其他页面打不开，打包链接打不开…部署到服务器后有时会因为防火墙、安全性的问题，导致部署失败这些是我遇到的问题，大家有遇到的话可以在评论区一起探讨总体来说对新手确实是个难点，对已经经历过的朋友不用多说了。之所以出了个一体化的流程，避免大家在部署的过程中踩坑。可能文章写的不是很好，希望大家提提意见，来为大家呈现更好的文章！
宝塔面板部署vue项目阿里云
12-27
### 部署Vue.js应用至阿里云服务器 #### 准备工作 为了成功部署Vue.js应用程序，在阿里云服务器上需完成必要的准备工作。这包括但不限于获取一台已开通的阿里云服务器实例以及一个可用的域名[^3]。 #### 安装必要组件 在开始之前，确保已经在阿里云服务器上安装了Node.js环境和Nginx服务器。这是运行Vue前端项目所必需的基础设施支持[^1]。 #### 使用宝塔面板简化操作流程 利用宝塔面板来管理Web服务能够极大地方便开发者进行网站配置与维护。对于希望快速上线Vue项目的用户来说，可以通过以下方式实现： - **登录并初始化宝塔面板**：首次使用时按照提示设置管理员密码等基本信息； - **创建新站点**：进入面板首页点击左侧菜单中的“网站”，再点击右上方的“添加站点”。输入准备好的域名信息即可建立一个新的虚拟主机空间用于承载即将发布的Vue应用[^2]。 #### 构建与上传Vue项目文件 构建生产版本的Vue项目通常会得到一个名为`dist`的目录，里面包含了所有静态资源文件。将此文件夹内的内容复制到上述新建站点对应的根路径下（一般位于/home/wwwroot/yourdomain.com），可通过SFTP工具或直接通过宝塔内置文件管理器来进行传输。 ```bash npm run build # 执行打包命令生成 dist 文件夹 ``` #### Nginx反向代理配置 为了让Nginx正确解析单页应用(SPA)，需要调整其默认配置以适应Vue Router模式下的路由重定向需求。编辑对应站点的Nginx配置文件，加入如下规则： ```nginx location / { try_files $uri $uri/ /index.html; } ``` 保存更改后重启Nginx使新的设定生效。 ---
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值