vue项目nginx服务器部署
2023/11/18 21:07:10
本文主要是介绍vue项目nginx服务器部署,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue.js 是一款用于构建 Web 界面的渐进式框架,由于其高效、灵活、易用等优点,已经成为前端开发的热门选择之一。
在开发 Vue 项目后,通常需要将其部署到服务器上进行线上访问,而 Nginx 作为一个高性能的 Web 服务器,也是常用的部署工具之一。
下面就是 Vue 项目在 Nginx 服务器上部署的详细教程。
前提条件
在进行部署之前,需要确保满足以下条件:
- 已经开启服务器的 Nginx 服务。
- 已经安装 Node.js,且版本不低于 8.9.0。
- 已经使用 Vue CLI 3 创建好了项目,并在本地运行成功。
打包项目
在进行部署前,需要将 Vue 项目打包成静态文件,并将其部署到服务器上。在项目的根目录下,运行以下命令进行打包:
npm run build
此命令将会在项目的 dist
目录下生成打包后的静态文件。
配置 Nginx
-
在服务器上安装 Nginx,并使用管理员权限打开 Nginx 配置文件:
sudo vi /etc/nginx/nginx.conf
-
找到
http
部分的配置,添加以下配置信息:server { listen 80; # 监听的端口号 server_name example.com; # 服务器名称 root /path/to/project/dist; # 项目打包生成的静态文件所在路径 location / { try_files $uri $uri/ /index.html; # 配置路由,使得页面刷新后能够正确展示 } }
其中,
example.com
为服务器的域名或 IP 地址,/path/to/project/dist
为项目打包生成的静态文件所在路径。 -
保存并关闭配置文件,并重启 Nginx 服务:
sudo service nginx restart
-
配置防火墙
如果在服务器上启用了防火墙,需要打开 80 端口,否则无法访问 Vue 项目。运行以下命令打开 80 端口:
sudo firewall-cmd --zone=public --add-port=80/tcp --permanent sudo firewall-cmd --reload
测试访问
完成以上步骤后,就可以通过浏览器访问 Vue 项目了。在浏览器中输入服务器的域名或 IP 地址,即可访问项目的首页。
结论
以上就是 Vue 项目在 Nginx 服务器上部署的详细教程。通过这个教程,您可以学习到如何使用 Nginx 部署 Vue 项目,并使其能够在线上正常运行。
这篇关于vue项目nginx服务器部署的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist