美文网首页
Nginx - vue项目部署

Nginx - vue项目部署

作者: 木头就是我呀 | 来源:发表于2020-02-13 18:41 被阅读0次

    本次实现微信分享定位的时候遇到了一个问题:

    • vue项目build后产生的dist静态文件,怎么部署到nginx中,且不是在域名的根目录中,是在XXX.cn/app/项目名这样的路径下。

    1.部署在nginx非根目录下的项目,可能会找不到js/css

    配置publicPath
    • 这样配置后产生的效果是,dist编译后的index.html中的引入js/css路径都增加了这样的前缀,如果不这样设置,就会去nginx根目录中去找,这样就会找不到这些js/css,报404问题。
      dist/index.html
    • 当然,上面的方式是一种解决方案,不过不是很优雅,优雅的解决方案如下:将publicPath设置为'./',这样,无论项目路径怎样变化,都不用再次修改这里了。

    2. nginx 配置文件

    • 静态文件配置
        location /app {
            alias   C:\myApps;
            allow all;
            autoindex on;
        }
    
    • 后台接口配置
        location /api {
            proxy_pass http://www.yangxc.cn:7001/test-api;
        }
    

    含义:对所有的请求路径包含/api的,代理到http://www.yangxc.cn:7001/test-api上

    • 停止掉所有nginx taskkill /f /t /im nginx.exe 停掉所有的nginx

    相关文章

      网友评论

          本文标题:Nginx - vue项目部署

          本文链接:https://www.haomeiwen.com/subject/dvykfhtx.html