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

文章目录

概要

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

整体部署流程

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

  1. 确保环境准备

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

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

      bash 复制代码
      sudo apt update
      sudo apt install -y nodejs npm
    • 安装 Nginx

      bash 复制代码
      sudo apt update
      sudo apt install -y nginx
    • 启动Nginx

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

    • 在本地项目目录下运行以下命令构建项目:

      bash 复制代码
      npm install
      npm run build
    • 将生成的dist文件夹上传到服务器,我这里用的是xftp:

  3. 配置nginx

    • 编辑Nginx配置文件(默认路径为 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf):

      bash 复制代码
      sudo nano /etc/nginx/conf.d/vue-app.conf
    • 添加以下内容

      bash 复制代码
      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配置是否正确

    bash 复制代码
    sudo nginx -t
  2. 重新加载Nginx

    bash 复制代码
    sudo systemctl reload nginx
  3. 验证部署

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

技术细节

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

小结

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

相关推荐
Johny_Zhao17 分钟前
Docker 一键安装部署 JumpServer 堡垒机
linux·网络安全·信息安全·云计算·shell·jumpserver·ldap·yum源·系统运维
热爱生活的猴子6 小时前
阿里云服务器正确配置 Docker 国内镜像的方法
服务器·阿里云·docker
艾伦_耶格宇10 小时前
【ACP】阿里云云计算高级运维工程师--ACP
运维·阿里云·云计算
Johny_Zhao12 小时前
Ubuntu系统安装部署Pandawiki智能知识库
linux·mysql·网络安全·信息安全·云计算·shell·yum源·系统运维·itsm·pandawiki
云资源服务商15 小时前
阿里云Flink:开启大数据实时处理新时代
大数据·阿里云·云计算
数据与人工智能律师16 小时前
数字资产革命中的信任之锚:RWA法律架构的隐形密码
大数据·网络·人工智能·云计算·区块链
百锦再19 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
快快网络-三七1 天前
云计算环境下的成本控制策略:按需计费与资源弹性扩展详解
服务器·开发语言·数据库·安全·云计算·perl
国际云,接待1 天前
微软服务器安全问题
运维·服务器·云原生·云计算·azure
m0_694845571 天前
服务器需要备案吗?在哪些地区需要备案?
linux·运维·服务器·云计算