vue vue-router(history模式) node(express)项目部署到云主机上的nginx配置思考

2019年9月27日 168次阅读 来源: 思吾谓何思

我个人想了2种部署方案

1、将vue项目打包后放入node服务端的静态资源中访问

整体结构基本是这样的

《vue vue-router(history模式) node(express)项目部署到云主机上的nginx配置思考》

这样在云主机上的nginx配置就很简单

server {
    listen 80;
    # 你的域名
    server_name xxxxx.com;
    
    location / {
        # 你的node服务进程
        proxy_pass http://localhost:8088;
    }
}

但这样有一个问题，如果你的vue-router是history模式的话，你刷新或者手动输入url访问将会是404，你也很难通过修改nginx配置来规避这个错误（因为并不需要在nginx配置里面指定根目录）

解决办法：
vue官方
基于 Node.js 的 Express

对于 Node.js/Express，请考虑使用 connect-history-api-fallback 中间件。

这个方法我没有尝试过，不过应该是可行的！

这样的优点是很简便，适合小型的网站项目

2 将打包的vue项目和node服务端分别部署

server {
    listen 80;
    server_name xxx.com;
    # 客户端
    location / {
            # 根目录
            root html/client;
            # 主页
            index index/html index/htm;
            # 避免history模式刷新404
            try_files  $uri $uri/ /index.html;
    }
    # 管理控制后台
    location /admin {
            root html/admin;
            index index/html index/htm;
            try_files  $uri $uri/ /index.html;
    }
    # 服务端
    # api 
    location /api {
            proxy_pass   http://localhost:8088;
            # 跨域
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

}

这样部署虽然稍微麻烦一点，但可以适应很多场景，而且开发分工更方便，结构也一目了然

    原文作者：思吾谓何思
    原文地址: https://segmentfault.com/a/1190000016064460
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞