vue3项目部署在阿里云轻量应用服务器上

news/2024/11/24 6:07:01/

文章目录

    • 概要
    • 整体部署流程
    • 技术细节
    • 小结

概要

vue3前端项目部署在阿里云轻量服务器

整体部署流程

首先有一个Vue3前端项目和阿里云应用服务器

  1. 确保环境准备

    • 如果是新的服务器,在服务器内运行以下命令更新软件包

      sudo apt update && sudo apt upgrade -y  # Ubuntu/Debian
      sudo yum update -y                     # CentOS
      
    • 在服务器内安装Node.js和npm工具

      sudo apt update
      sudo apt install -y nodejs npm
      
    • 安装 Nginx

      sudo apt update
      sudo apt install -y nginx
      
    • 启动Nginx

      systemctl start nginx
      
  2. 构建vue3项目,并上传构建文件到服务器

    • 在本地项目目录下运行以下命令构建项目:
      npm install
      npm run build
      
    • 将生成的dist文件夹上传到服务器,我这里用的是xftp:
      在这里插入图片描述
  3. 配置nginx

    • 编辑Nginx配置文件(默认路径为 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf):
      sudo nano /etc/nginx/conf.d/vue-app.conf
      
    • 添加以下内容
      server {listen 80;server_name <你的域名或服务器IP>;root /var/www/vue-app;index index.html;location / {try_files $uri /index.html;}error_page 404 /index.html;
      }
      

说明:

  • <你的域名或服务器IP> 替换为实际的域名或 IP 地址。
  • try_files $uri /index.html; 用于处理 Vue Router 的 history 模式。
  1. 测试Nginx配置是否正确

    sudo nginx -t
    
  2. 重新加载Nginx

    sudo systemctl reload nginx
    
  3. 验证部署

  • 在浏览器中访问 http://<你的域名或服务器IP>。
  • 如果一切正常,你应该能够看到 Vue 项目运行的页面。

技术细节

  • dist文件位置一定要放置正确
  • nginx配置完后要重新启动

小结

这部分只把vue3前端项目部署在阿里云轻量应用服务器上,后面计划与flask后端项目配合起来使用
下图是我成功配置后的截图

在这里插入图片描述


http://www.ppmy.cn/news/1549462.html

相关文章

在线pdf转word免费工具

基于部署的在线版pdf转word、pdf合并、拆分、pdf水印等多功能的免费在线工具&#xff0c;能够替代商用软件99%的功能。 在线访问地址&#xff1a;Tool4-PDF 页面截图&#xff1a; 在线访问地址&#xff1a;Tool4-PDF

ChatPaper.ai:通过阅读文献高效学习英语的新思路

前言 作为一名学习者&#xff0c;我们常常会遇到这样的困境&#xff1a;想提高英语水平&#xff0c;但单纯背单词缺乏语境&#xff1b;想读专业文献&#xff0c;却被英语障碍所困扰。今天我要分享一个工具 ChatPaper.ai&#xff0c;它让我找到了将英语学习和专业阅读完美结合的…

CHIMA网络安全攻防大赛经验分享

比赛模式 第一轮&#xff1a;20分钟基础知识赛&#xff08;50道题&#xff09; 安全运维&#xff0c;法律法规&#xff0c;linux操作系统等 第二轮&#xff1a;50分钟CTF夺旗&#xff08;5道题&#xff09; 题目涵盖 密码学 运用多种工具&#xff0c;如ASCII对照&#xff0c…

23种设计模式-享元(Flyweight)设计模式

文章目录 一.什么是享元设计模式&#xff1f;二.享元模式的特点三.享元模式的结构四.享元模式的优缺点五.享元模式的 C 实现六.享元模式的 JAVA 实现七.代码解析八.总结 类图&#xff1a; 享元设计模式类图 一.什么是享元设计模式&#xff1f; 享元&#xff08;Flyweight&…

如何通过对敏捷实践的调整,帮助远程团队提升研发效能?

首先明确一点&#xff0c;最敏捷的做法就是不要远程团队或分布式团队&#xff0c;远程一定比不上面对面同一地点的模式&#xff0c;毕竟环境不同&#xff0c;就不要期望远程团队和本地团队具备相同的效能&#xff0c;甚至期望更高。 那么&#xff0c;无论何种原因&#xff0c;…

使用uniapp编写APP的文件上传

使用uniapp插件文件选择、文件上传组件&#xff08;图片&#xff0c;视频&#xff0c;文件等&#xff09; - DCloud 插件市场 实用效果&#xff1a; 缺陷是只能一个一个单独上传

【C语言】连接陷阱探秘(3):形参、实参与返回值

目录 一、形参的 “迷障” 1.1. 定义与功能 1.2. 类型不匹配 1.3. 数量不一致 1.4. 顺序不一致 1.5. 数组形参退化 二、实参的 “暗礁” 2.1. 定义与功能 2.2. 求值顺序 “谜题” 2.3. 悬空指针 “深渊” 三、返回值的 “陷阱” 3.1. 定义与功能 3.2. 陷阱与缺陷 …

tcpdump抓包 wireShark

TCPdump抓包工具介绍 TCPdump&#xff0c;全称dump the traffic on anetwork&#xff0c;是一个运行在linux平台可以根据使用者需求对网络上传输的数据包进行捕获的抓包工具。 tcpdump可以支持的功能: 1、在Linux平台将网络中传输的数据包全部捕获过来进行分析 2、支持网络层…