vue项目打包后如何部署上线访问？

Question

vue项目打包后dist文件夹后，该如何部署到线上访问尼？是直接将dist丢入到服务器里面就可以吗？前后端分离的项目

Answer 1

如果是hash模式，直接将dist上传到服务器就可以；如果是history模式，需要服务器做一些配置

Answer 2

要看你后端用的什么语言写的,好像就是把api转应用程序就可以了.

Answer 3

vue项目打包后部署到服务器上一般使用nginx作为服务器中间件。
因为是前后端分离的项目，在本地是通过node来代理api的。打包之后失去了node环境，所以需要采用nginx作为服务器中间件来部署和代理api。

安装nginx后，使用nginx的反向代理，将api的地址代理到你的前端网址上。比如
你前端访问使用 192.168.10.50（www.a.com）
api地址为：192.168.10.51:8088

server {
        listen 80;     #1.你想让你的这个项目跑在哪个端口
        server_name 192.168.10.50;     #2.当前服务器ip
        location / {
            root   E:/my_project/dist;     #3.dist文件的位置
            try_files $uri $uri/ /index.html;     #4.重定向,内部文件的指向(照写)
        }
        location /api {  #4.当请求跨域时配置端口转发
            proxy_pass http://192.168.10.51:8088/api; #5.转发地址
            proxy_set_header Host $http_host;
        }
    }

通过代理api之后，你访问http://192.168.10.51:8088/api就相当于访问http://192.168.10.50:80.
这样既不暴露api的实际地方。既安全又稳定。

Answer 4

https://wintc.top/article/29

Answer 5

那看你用啥web服务器了, 大部分是nginx或者tomcat