脚本宝典收集整理的这篇文章主要介绍了vue vue-router(history模式) node(express)项目部署到云主机上的nginx配置思考，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

我个人想了2种部署方案

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

整体结构基本是这样的

这样在云主机上的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';
    }

}

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

脚本宝典总结

以上是脚本宝典为你收集整理的vue vue-router(history模式) node(express)项目部署到云主机上的nginx配置思考全部内容，希望文章能够帮你解决vue vue-router(history模式) node(express)项目部署到云主机上的nginx配置思考所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。