脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

我个人想了2种部署方案

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

整体结构基本是这样的

clipboard.png

这样在云主机上的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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过