美文网首页
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