vue项目部署到nginx
最近产品做了一半,要求将前端的代码部署到服务器,以前没有部署过,这可咋办呀~~。现在部署好了,给大家总结以下,里面还是有很多坑的
·
一.vue项目打包
- 修改config/index.js的assetsPublicPath为 ./(注意一定是build里面的,下面dev中也有这个配置)
这个路径的配置很重要,默认是项目名称。如果没有修改路径会变成这样,访问不到打包后的文件。就算返回200,你会发现返回的根本不是那些打包后的文件。
- 打包成dist文件
npm run build
这时我们就可以把生成的dist文件扔到服务器就可以了。我这里使用xshell进行远程连接,xftp进行文件传输。
二.配置nginx
-
安装nginx
安装的步骤我这里不详细介绍,安装后通过nginx -v 可测试是否安装成功 -
修改nginx的配置文件
默认路径:
vim /etc/nginx/nginx.conf
在 http{ } 中配置一个server
server {
listen 8080; #1.你想让你的这个项目跑在哪个端口
server_name 47.94.76.91; #2.当前服务器ip
location / {
root /home/dist/; #3.dist文件的位置(我是直接放在home目录下了)
try_files $uri $uri/ /index.html; #4.重定向,内部文件的指向(照写)
}
location /api { #4.当请求跨域时配置端口转发
proxy_pass http://47.92.76.97:8848/api; #5.转发地址
}
}
跨域问题在这里着重说一下:
- 这里的跨域配置是打包后,nginx做的代理转发。在开发模式的proxytable没有任何关系。
- 如果nginx不进行跨域的配置,虽然项目部署了,但是服务根本就会访问不到
- 关于跨域的介绍可以看我的另外一篇文章 https://blog.csdn.net/weixin_42565137/article/details/90578780
三.开放端口
像阿里云的服务器都需要开通端口才可以访问的。这个不做详细介绍。
然后我们重启nginx就可以访问我们部署的项目了 service nginx restart
更多推荐
已为社区贡献11条内容
所有评论(0)