如何将Vue项目成功部署到服务器并避免常见坑点？

本文共计651个文字，预计阅读时间需要3分钟。

目录+需求+过程+1. 首先确定需要将vue项目进行打包+2. 将dist文件上传至服务器+3. 使用Nginx进行配置+遇到问题+nginx服务器404错误原因+404 Not Found+nginx服务器500错误原因+500 Internal Server Error

目录

• 需求
• 过程
• 1、首先，肯定需要将vue的项目进行打包
• 2、将dist文件上传到服务器
• 3、使用Nginx配置
• 踩坑
• nginx服务器404错误的原因 404 Not Found
• nginx服务器500错误的原因 500 Internal Server Error
• nginx反向代理
• 总结

需求

前后端完成项目后，需要部署到本地的服务器上。

第一次部署，以下是从0开始慢慢学着弄的详细过程

过程

1、首先，肯定需要将vue的项目进行打包

npm run build ，打包成功后，会出现dist文件夹

这时候你可以先试试打开dist文件夹下的index.html能不能显示页面。如果可以，直接跳到第二步。如果和我一样打开后没页面，是空白页的。可以试试下面的操作。

在vue.config.js中，添加下面三行代码

如果这时候还是不行的话，看看你路由是不是用的hash模式

这样，应该就可以打开了。

2、将dist文件上传到服务器

因为服务器就在身边，所以没那么麻烦，直接用移动硬盘拷进去了。 如果需要远程上传的话，可以参考用Xftp相关的帖子。

3、使用Nginx配置

首先要保证服务器里面安装了nginx。我是Ubuntu下安装，所以直接用apt-get

# 切换至root用户 sudo su root apt-get install nginx

查看nginx是否安装成功

nginx -v

启动nginx

service nginx start

浏览器输入服务器ip地址就能看到了

然后修改nginx

终端下 cd /etc/nginx sudo vim nginx.conf

vim是进行文件修改，cat是进行查看 sudo是以管理员身份运行，防止权限问题

ps：修改配置文件时，按一下 i 进入编辑模式，编辑完了 按Esc，然后切换到英文输入法，输入 :wq 保存并退出

然后在121.xxx.xxx.xx:8083; } location / { try_files $uri $uri/ /index.html; } }

后台接口的主机号和服务器的主机号是一直的，都是121.xxx.xxx.xx， server_name添加了主机号，因为所有接口都有共同前缀 api，所以反向代理，接口是8083

至此，部署全部完毕

总结

到此这篇关于前端Vue项目部署到服务器的全过程以及踩坑记录的文章就介绍到这了,更多相关前端Vue项目部署服务器内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！