当前位置： 首页>后端>正文

vue项目部署

后端2024-04-29 16:27:30

1. 前言

  1. 部署这块其实很简单,方式也非常多
  2. 正好最近找工作,也就是在自我回顾下
  3. 以前我用过的 有jekins自动化部署,当时全都是我自己配置的,花了几天研究各种指令
  4. 后来也有用过 宝塔基于php的也挺方便
  5. 还有其他方案(GitLab CI/CD、Travis CI等)下面详细写写那些变的东西哈哈

2. 打包项目

  1. 现在基本都是前后端分离的,前后端独立部署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可
  2. npm run build 打包vue项目
  3. 将 Vue 项目的源代码打包为优化后的静态文件，通常存放在一个名为 dist的目录中

3. 配置服务器

  1. 选择一个适合的服务器环境来托管你的 Vue 项目
  2. 常见的服务器环境包括 Apache、Nginx、Node.js 等
  3. 具体配置过程会因服务器环境的不同而有所差异，可以参考相应的文档或教程来进行配置。
  4. 最简单自己在玩的时候 node+Express搭建个 服务器 ,
    把打包后的放到 指定的静态资源目录,启动服务器也能访问

4. 将静态文件部署到服务器

  1. 将生成的静态文件（位于 dist 目录）上传到服务器上。
    你可以使用 FTP、SCP 或其他文件传输工具将文件上传到服务器的指定目录
    scp 远程拷贝 当初 jekins 不少配置这东西,
// scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径
scp dist.zip user@host:/xx/xx/xx

5. 配置服务器路由

  1. 如果你的 Vue 项目使用了前端路由（如 Vue Router），需要在服务器配置中添加对于路由的重定向规则，以确保访问特定路由时返回正确的页面。
  2. 具体配置方法也会因服务器环境的不同而有所差异，请参考相应的文档或教程

6. 启动服务器

  1. 根据服务器的配置和要求，启动服务器以使你的 Vue 项目在生产环境中可访问
  2. 这可能涉及到运行相应的命令或启动脚本，具体取决于你选择的服务器环境
  • 让web容器跑起来，以nginx为例
server {
  listen  80;
  server_name  www..com;

  location / {
    index  /data/dist/index.html;
  }
}
  • nginx重启
// 检查配置是否正确
nginx -t 

// 平滑重启
nginx -s reload

7. 域名绑定和 DNS 解析（可选）

  1. 如果你拥有自己的域名，可以将域名与服务器进行绑定，并进行 DNS 解析，以便通过域名来访问你的 Vue 项目。
  2. 这通常需要在域名注册商或 DNS 服务提供商的控制面板进行相应的设置

8. 下篇文章来解释下404问题

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉

https://www.xamrdz.com/backend/3t41938370.html

相关文章：