Nginx 前端项目配置（vue）及接口代理

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Nginx 前端项目配置（vue）及接口代理，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1846字，纯文字阅读大概需要3分钟。

内容图文

Nginx是目前用的比较多的一个前端服务器

其优点是配置简单修改一下server就能用
并发性能比较好，具体怎么好就看这个吧
开撸

1、找到nginx （liunx系统，已安装）
whereis nginx

2、找到位置并进入
nginx: /usr/local/nginx
cd /usr/local/nginx

3、修改conf/nginx.conf（提示权限不够的前面加 sudo）
vi conf/nginx.conf

4、直接在server里面修改

`
server {
# listen后面跟上监听的端口号
listen 80;
server_name localhost;

    # 这个是 根路径下的配置 （下面的@router跟他是一起的）（vue项目必须）
    location / {
            # 这个是文件的根路径，html/vue_demo/dist 换成你自己的文件路径
            # root是根路径的意思， 文件夹我是放再nginx下的html文件夹里面了
            root   html/vue_demo/dist;
            # 当前文件夹的文件格式
            index  index.html;、
            # 是vue这样项目的加上这个，避免刷新就地址错误
            try_files $uri $uri/ @router;
    }
        
    # 这个是配置的 www.xxx.com/admin 这样子路径下显示另外一个项目的配置
    # 需要了就去掉 代码前面的 #
    #location /admin {
             # 此为新应用index,static目录，同时注意这里是alias,不是root，还有以及new的后面有/结尾
             # html/vue_demo/admin/ 更改为自己的文件夹路径
    #        alias html/vue_demo/admin/;
             # /admin/index.html 的admin是必须加的，区分子路径的标识
    #        try_files $uri $uri/ /admin/index.html;
    #}
    # 配置普通静态网站的， vue就不需要不开
    #location /static {
    #      alias html/wuyan/static/;
    #}
    #跟上上面跟路由是一起的 （vue项目必须）
    location @router {
            rewrite ^.*$ /index.html last;
    }
    # 设置接口代理，适用vue项目中配置反向代理的情况，不需要不开
    # location /dev-api {
    #         add_header Access-Control-Allow-Methods *;
    #         add_header Access-Control-Allow-Origin $http_origin;
    #         add_header Access-Control-Allow-Credentials true;
              # 替换为自己的接口地址 http://xxxx.xx.xx.x:xxxx
    #         proxy_pass http://xxxx.xx.xx.x:xxxx;
    # }

}
`

5、总结：这里面满足了基本的nginx配置（包括普通静态页面、vue这样的需要打包的项目、子路径配置、接口代理避免跨域），
这个教程是针对前端新手的。描述的不好的可以提，积极改正，重新做人 sky

内容总结

以上是互联网集市为您收集整理的Nginx 前端项目配置（vue）及接口代理全部内容，希望文章能够帮你解决Nginx 前端项目配置（vue）及接口代理所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---