前端Vue项目部署到服务器的全过程以及踩坑记录.docx

第

前端Vue项目部署到服务器的全过程以及踩坑记录

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

需求

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

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

过程

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

npmrunbuild，打包成功后，会出现dist文件夹

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

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

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

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

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

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

3、使用Nginx配置

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

#切换至root用户

sudosuroot

apt-getinstallnginx

查看nginx是否安装成功

nginx-v

启动nginx

servicenginxstart

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

然后修改nginx

终端下

cd/etc/nginx

sudovimnginx.conf

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

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

然后在http代码块内输入下面的代码

server{

listen9000default_server;

listen[::]:80default_server;

root/home/www/dist;

indexindex.htmlindex.htmindex.nginx-debian.html;

server_name_;

location/{

try_files$uri$uri//index.html;

}

其实主要就是添加server，我这里设置的端口号是9000，可以根据自己的需求设置，不用一样，root放的就是我拷到服务器的dist文件存放的目录（就是这里，遇到了3个坑，后面会讲的，这里还不是最终代码，一步一步来）

可以输入sudonginx-t查看是否修改的正确，输出如下（其实感觉只能检查出最基本的错误，有一些小问题也没法检查出来）

nginx:theconfigurationfile/etc/nginx/nginx.confsyntaxisok

nginx:configurationfile/etc/nginx/nginx.conftestissuccessful

然后就重新加载nginx，输入：

sudonginx-sreload

做完上面的步骤以后，我以为就已经解决了，然后打开浏览器，访问主机号:端口号然后报错404

下面就记录一下，跟着上面步骤踩坑的过程。如果有类似的，可以参考。

踩坑

nginx服务器404错误的原因404NotFound

首先，我们还是要回到nginx.conf配置文件去检查有没有写错ip地址和端口号

然后location/{}里面如果是try_files$uri$uri/=404;的话，把=404改掉，改成你的html名，大部分应该都是index.html

nginx服务器500错误的原因500InternalServerError

解决完404以后，又访问一下，结果是500的错。这个坑折腾了我很久。

首先，我们遇到500，先去看报的什么错，再具体问题具体分析。

error.log和access.log都在/var/log/nginx下(如果没有的话，可以看看你的nginx.conf，里面应该会有写)，所以输入

cd