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

最新推荐文章于 2024-04-26 17:54:13 发布
VIP文章 最新推荐文章于 2024-04-26 17:54:13 发布
阅读量2.2k 收藏 20
点赞数 3
分类专栏： Vue 文章标签： nginx vue.js 阿里云
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hope2019/article/details/125133164
版权

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元/天 解锁文章
顾溪南
关注
  • 3
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
最近部署一个Vue项目到阿里云ECS上，因为项目涉及一些跨域请求，所以采用了Nginx代理请求本地的node服务（利用pm2做进程管理）。node服务借助axios设置headers的referer、host转发请求，解决跨域请求问题。 先交代下在阿里云ECS里安装的部署环境：phpstudy（php调试运行大礼包，里面包含nginx、mysql等，还能监控端口占用情况）、pm2（node服务进程管理工具）、node、git等等。 部署过程 拉去GitHub项目代码至root目录下（找到安装phpstudy的WWW目录），构建项目 修改nginx-conf的代理配置、root项配置（指
nginx 宝塔 环境部署
热门推荐
IT-Andy
05-30 1万+
现在就手把手教学，废话不多说，直接开门见山：环境部署前准备：1、阿里云账号；2、有购买的服务器(以密码类型举例)；3、安装好xshell；第一步：首先登陆你的阿里云，然后去查看你的 ip(公)；第二步：使用xshell连接你的服务器，如图所示：1、输入你的ip(公)地址2、输入用户名3、输入密码第二步：安装宝塔Linux面板(根据你购买的服务器选择，本文以Centos举例：)安装命令：Centos...
Vue项目宝塔面板安装一站式部署到服务器
XIAOAIZXLQ的博客
04-27 1228
vue项目打包配置问题，稍有不对，部署到服务器会出现意想不到的问题Nginx的配置，如果没有配置好，会出现苦恼的现象，如：后端接口访问错误、其他页面打不开，打包链接打不开…部署到服务器后有时会因为防火墙、安全性的问题，导致部署失败这些是我遇到的问题，大家有遇到的话可以在评论区一起探讨总体来说对新手确实是个难点，对已经经历过的朋友不用多说了。之所以出了个一体化的流程，避免大家在部署的过程中踩坑。可能文章写的不是很好，希望大家提提意见，来为大家呈现更好的文章！
关于vue项目宝塔部署后出现路由跳转方面的Nginx问题
wzyEMT的博客
02-27 217
关于vue项目宝塔部署后出现路由跳转方面的Nginx问题
Docker镜像+nginx 部署 vue 项目的方法
01-09
一、打包vue项目 　　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。 　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。 二、获取nginx 镜像 　　nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。 　　在终端输入： docker pull nginx 　　即可以获取到nginx镜像。 　　Docker镜像是一个特殊的文件系统，除了提供容器运行时
nginx下部署vue项目的方法步骤
09-29
主要介绍了nginx下部署vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
宝塔多个history模式vue项目的nginx配置
ywh22122的博客
03-31 1658
宝塔上多个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前后端分离项目
qq_48575500的博客
04-29 2295
检查连接数据库的用户名和密码都没有出现错误，而且本地mysql服务的localhost也修改成对应的阿里云服务ip了，可就是连接失败，不能访问数据库。在导入sql文件之前，需要先创建数据库，此时需要先设置这个数据库的用户名和密码（只是这个数据库的用户名和密码）而已，如果嫌麻烦可以使用全局的root用户（说明nginx监听的是8081的请求，如果listen配置了ip地址，那么下面的server_name就不生效了。安装宝塔面板，等待安装完成，会展示宝塔面板的外网、内网面板地址以及账号密码。
如何把vue项目部署服务器（宝塔面板）上
weixin_43923808的博客
06-01 9901
如果输入地址还是打不开，那么可能是以下几个原因。点网站，点击设置，选择网站目录。
宝塔Linux面板Nginx部署自己的项目
dwdffefsd的博客
03-24 3956
宝塔Linux面板Nginx部署自己的项目
linux 部署tp5 项目
qq_41876600的博客
08-11 4389
ThinkPHP5是一款十分流行的PHP框架，很多公司都基于TP开发。但是由于Pathinfo()的设置，使得TP5的框架在Nginx下会报404错误。如果你配置在根目录下，则是502，如果你配置在Public下，则是只有首页能显示，其他页面全都是404。 这里，需要调整一下Nginx的conf规则，需要注意的是，调整的是Nginx对于这个网站的规则，而不是调整整个的规则。比如网站目录是abc,...
Nginx+Uwsgi+Django+Vue部署
02-25
Nginx+Uwsgi+Django（python3）+Vue部署，一步步实现。网上找了N多篇文章都没成功，特意记录，以免其他同学踩坑
web服务器nginx+部署前端vue项目
03-22
其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。 2.Nginx 作为 web 服务器 Nginx 可以作为静态...
阿里云k8s kubectl 一键部署vue+nginx
01-10
阿里云k8s kubectl 一键部署vue+nginx
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 388
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 178
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 152
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 279
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue 实现级联选择器功能
清音的博客
04-22 514
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
ubuntu+nginx部署vue3
05-30
好的，这里是部署Vue3应用到Ubuntu服务器并使用Nginx作为反向代理的步骤： 1. 在Ubuntu服务器上安装Node.js和npm。可以使用以下命令安装： ``` sudo apt update sudo apt install nodejs sudo apt install npm ``` 2. 在服务器上安装Vue CLI： ``` sudo npm install -g @vue/cli ``` 3. 使用Vue CLI创建Vue3应用： ``` vue create my-app ``` 4. 进入应用目录并启动开发服务器： ``` cd my-app npm run serve ``` 5. 在Nginx中配置反向代理。在Nginx的配置文件中添加以下内容： ``` server { listen 80; server_name example.com; # 修改为你的域名 location / { proxy_pass http://localhost:8080; # 修改为你的应用监听的端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 6. 重新加载Nginx配置并启动Nginx服务： ``` sudo systemctl reload nginx sudo systemctl start nginx ``` 现在你的Vue3应用已经成功部署到Ubuntu服务器并使用Nginx作为反向代理。你可以通过访问你的域名来查看应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值