阿里云里Linux宝塔配置vue前端教程

已于 2022-03-08 21:33:13 修改
阅读量474 收藏
点赞数 1
分类专栏： 运维 前端 文章标签： 阿里云
于 2022-03-08 21:32:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26018335/article/details/123363541
版权
本文介绍了如何使用npm run build打包前端项目，并将压缩后的dist文件上传至/www/wwwroot/http目录。在宝塔面板中创建新站点，确保80端口开放，通过IP地址访问以测试配置是否成功。此外，还涉及了文件解压和剪切操作，以及如何在宝塔和阿里云上检查端口状态。
摘要由CSDN通过智能技术生成

1.npm run build前端项目得到dist文件，然后压缩上传到/www/wwwroot/http（记得清空http里面的文件），解压文件并剪切到http根目录下面。在这里插入图片描述

  1. 在宝塔里面添加一个站点,通过ip地址访问 在这里插入图片描述
  2. 检查80端口有没有开放（宝塔和阿里云都要检查）
  3. 访问第二步的ip地址，能成功显示则成功
    在这里插入图片描述
前端筱攻城狮
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BT宝塔面板HTML前端页面路径目录
佛系豪豪
01-16 1413
修改BT宝塔面板HTML前端页面路径目录
前端Jquery，Vue通过授权URL直传阿里云OSS
11-16
本文将详细介绍如何使用Jquery和Vue.js这两个前端库，结合阿里云OSS提供的API，实现通过授权URL进行文件的直传。 首先，让我们了解下阿里云OSS。对象存储服务（OSS）是阿里云提供的一种海量、安全、低成本、高可靠...
宝塔界面中部署vue前端
qq_45684895的博客
12-01 255
宝塔中部署vue前端
部署项目vue +阿里云服务器 + 宝塔面板
友人A的博客
03-22 665
1. 打包vue项目 1.1 在 config -> index.js中把/改为./，可以避免找不到静态文件。 1.2 在 build -> utils.js 中添加下行可解决elementUI小图标不显示问题。 1.3 vue打包后放到服务器上路由不跳转，需要将路由配置文件（router -> index.js）中的 mode:'history' 注释掉，或者改为 hash。 1.4 使用 npm run build 进行打包，打包成功后生成 dist 文件夹。 2. 将打包项目
用宝塔部署vue+springboot上线公网详细步骤
最新发布
程序员柚子的博客
06-16 469
快速部署网站上线的方式，腾讯云+宝塔。
阿里云前端开发学习路线 - HTML入门与实战 笔记
Rotark的博客
05-02 989
学习链接 目录学习链接第一章 Web基础常见浏览器浏览器内核web标准第二章 HTML入门 第一章 Web基础 常见浏览器 浏览器内核 web标准 第二章 HTML入门
使用宝塔面板部署前端项目到服务器
m0_62476845的博客
12-22 3582
在此之前，我们已经创建了宝塔面板账号、拥有了一台服务器。现在，我们想让我们的前端能够像阿里巴巴、淘宝等网站那样被别人访问，那么我们应该在宝塔面板上面怎样做呢？一、第一步：创建文件夹1、打开我们的宝塔面板后，我们会看到左侧有一列目录，点击里面的文件。2、点击在根目录下名叫www的文件夹3、点击里面叫wwwroot的文件夹4、在里面随便创建一个文件夹准备放入我们的前端代码5、放入我们的前端代码二、第二步：部署前端项目1、在宝塔面板的左侧有个叫网站的名字，点进去并选择node项目。
SaYa-Vue:沙耶项目前端，仿阿里云项目
04-06
萨亚维 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
VUE 实现element upload上传图片到阿里云
10-14
主要介绍了VUE 实现element upload上传图片到阿里云，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
高仿移动端网易云音乐 Vue前端项目
05-04
《构建高仿移动端网易云音乐Vue前端项目》 在当今互联网时代，优秀的前端框架和工具是构建高效、响应式Web应用的关键。本项目——“高仿移动端网易云音乐 Vue前端项目”正是基于这样的需求，利用Vue.js生态中的核心...
阿里云技术团队偏前端技术.pdf
09-22
阿里云技术团队偏前端技术的讨论涵盖了广泛的前端开发主题，包括事件总线的实现、调试工具的使用、前端框架的应用、CSS预处理器的高级技巧、JavaScript优化、项目配置与脚本管理、前端性能优化以及浏览器扩展插件的...
Vue前端项目部署到aliyun注意事项
weixin_41866717的博客
08-17 922
前后端分离项目部署注意事项，前端使用vue，部署主要包括 aliyun配置 vue配置 Nginx配置 aliyun配置 使用阿里云服务器，有免费使用一个月的版本。这里正常下载安装就行，需要注意的是阿里云服务器端口需要在控制台开放，否则无法访问。 进入安全组： 配置规则： 添加端口： vue配置 1.配置node.js环境 首先在Linux中配置node.js环境，环境配置aliyun有教程: 我也记录一下： 1.下载Node.js安装包 wget https://npm.taobao.org/
宝塔面板部署vue前端项目
m0_57057282的博客
06-28 1200
阿里云部署vue前端项目
手摸手带你用宝塔部署前端项目。
weixin_43330752的博客
02-24 4812
宝塔Linux面板是提升运维效率的服务器管理软件，支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。 有30个人的专业团队研发及维护，经过200多个版本的迭代，功能全，少出错且足够安全，已获得全球百万用户认可安装。运维要高效，装宝塔。 本文使用阿里云服务器，其他服务器部署流程也大同小异。 一:首先购买一台云服务器。 这里操作系统我选择的是CentOS 7.5 ，此处需要注意，CentOs8+下载宝塔会有问题。 并且进行重置服务器密码操...
如何在宝塔打包上传vue项目
qq_42444795的博客
09-19 4009
轻松创建自己的网站，并且打包上传自己的vue3项目至网站
利用宝塔面板进行前端项目上线部署(图文)
jsbbhx的博客
01-06 2844
域名：若第一次进行站点添加，域名为宝塔Ip+自定义端口，这里要注意的是，若已经有一次上线，若再输入宝塔Ip+自定义端口，就会出现此站点已占用的提示，这里使用两个域名解决，第一行输入一个自定义域名(随机),第二行输入真实的IP+端口号，随后删除第一个自定义域名即可备注:自定义根目录：为刚才上传的前端项目目录其他设置默认即可。
阿里云中宝塔面板部署的djanog程序通过域名端口访问到静态文件图片，视频，音频
。
04-13 1327
正式上线后，将采取新的解决方案：1.什么是静态文件不能与服务器端做动态交互的文件都是静态文件如:图片,css,js,音频,视频,html文件(部分)2.静态文件配置在 settings.py 中配置一下两项内容:1.配置静态文件的访问路径通过哪个url地址找静态文件说明:指定访问静态文件时是需要通过 /static/xxx或 127.0.0.1:8000/static/xxxxxx 表示具体的静态资源位置2.配置静态文件的存储路径 STATICFILES_DIRS。
华为云耀云服务器CentOS系统安装宝塔面板、面板用户名密码重置、面板访问路径等教程
Astupidzirui的博客
08-30 2253
华为云耀云服务器CentOS7.9操作系统安装宝塔面板以及Docker。
宝塔默认访问地址查询
weixin_41492299的博客
03-18 3278
bt default
Vue基础教程：渐进式前端框架详解
Vue基础与实践简易教程是一份针对初学者设计的全面指南，旨在帮助读者快速理解和上手Vue这一流行的前端框架。本教程由Vue基础入门至高级实践，涵盖了多个关键知识点。 在第一部分，作者首先介绍了Vue的基础概念，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值