当前位置: 首页 > article >正文

nginx部署前段VUE项目

以下是使用 Nginx 部署前端 Vue 项目的步骤:
一、准备工作
确保你已经有一个构建好的 Vue 项目。在项目目录下,通过运行命令如npm run build来生成生产环境的构建文件,通常会生成在dist目录下。
安装 Nginx,如果还未安装,可以根据你的操作系统进行安装。
二、配置 Nginx
找到 Nginx 的配置文件,通常在 Linux 系统中为/etc/nginx/nginx.conf或者在安装目录下的conf文件夹中。
在配置文件中添加一个新的server块来配置 Vue 项目的部署:
nginx
复制

http {
    server {
        listen 80;  // 监听的端口,可以根据需要修改
        server_name your_domain_name;  // 你的域名,如果是本地测试可以设置为 localhost

        location / {
            root /path/to/your/vue/dist;  // 指向 Vue 项目构建后的 dist 目录路径
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }
}

将/path/to/your/vue/dist替换为实际的 Vue 项目构建后的dist目录路径。
三、启动或重启 Nginx
如果 Nginx 正在运行,需要重启 Nginx 使配置生效。具体命令根据操作系统可能有所不同:
在 Linux 系统中,可以使用sudo service nginx restart(不同的发行版可能命令略有不同)。
在 Windows 系统中,可以在任务管理器中找到 Nginx 服务并重启它。
现在,你可以通过指定的域名或localhost(如果在本地测试)和配置的端口来访问你的 Vue 项目了。


http://www.kler.cn/news/289294.html

相关文章:

  • wsl2 无法上网解决方法
  • 文本文件完整性判断-加密
  • Python中排序算法之冒泡排序
  • Soul Machines——AI生成虚拟主播或虚拟人,模拟真人交互
  • 后端MVC三层架构,Mybatis ,雪花算法生成唯一id
  • 『功能项目』销毁怪物蛋的Shaders消融特效【17】
  • SpringDataJPA系列(5)@Query应该怎么用?
  • QT connect的使用
  • 算法练习题11:单词出现次数
  • Android kotlin使用Netty网络框架实践(客户端、服务端)
  • 新版Pycharm的Available Packages里面为空,新版没有Manage Repositories功能,如何解决
  • OpenGL/GLUT实践:弹簧-质量-阻尼系统模拟摆动的绳子和布料的物理行为(电子科技大学信软图形与动画Ⅱ实验)
  • 《React Hooks:让你的组件更灵活》
  • Android之电量优化
  • 【论文笔记】Multi-Task Learning as a Bargaining Game
  • 4.3 python 编辑单元格
  • 惠中科技:开启综合光伏清洗新征程
  • 文件包含所用协议实战
  • sql-labs56-60通关攻略
  • 设计模式结构型模式之适配器模式
  • vue3子组件修改父组件传来的值
  • 普元Devops-在云主机上拉取harbor的docker镜像并部署
  • 2017年系统架构师案例分析试题五
  • JVM理论篇(一)
  • Flask的secret_key作用
  • Nginx负载均衡数据流分析
  • ES6 类-总结
  • C#——扩展方法
  • 【微信小程序】全局数据共享 - MobX
  • xxxSendMessageBSM函数分析