您的位置:首页 > 文旅 > 美景 > 香港网上购物网站大全_北京建企业网站_seo案例分析及解析_sem与seo的区别

香港网上购物网站大全_北京建企业网站_seo案例分析及解析_sem与seo的区别

2024/12/23 11:28:04 来源:https://blog.csdn.net/qq_53243414/article/details/143995409  浏览:    关键词:香港网上购物网站大全_北京建企业网站_seo案例分析及解析_sem与seo的区别
香港网上购物网站大全_北京建企业网站_seo案例分析及解析_sem与seo的区别

文章目录

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

概要

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后端项目配合起来使用
下图是我成功配置后的截图

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com