V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
NGINX
NGINX Trac
3rd Party Modules
Security Advisories
CHANGES
OpenResty
ngx_lua
Tengine
在线学习资源
NGINX 开发从入门到精通
NGINX Modules
ngx_echo
badtypea
V2EX  ›  NGINX

求助!遇到了 vue 跟 nginx 奇葩问题,我人傻了

  •  
  •   badtypea · 2020-02-26 23:10:34 +08:00 · 4716 次点击
    这是一个创建于 1724 天前的主题,其中的信息可能已经有所发展或是发生改变。

    撞上了个难搞的项目,前端用 vue 写的,没有域名,IP 直接访问。

    现在客户要求加个首页,IP 直接访问,然后可以跳转回原来的 vue 页面。

    但问题是他源码没了,我改不了 baseUrl,用 nginx 各种配置二级目录也一直不行...

    今天弄了一天的 nginx.conf,我人都要傻了,有没有熟悉这方面的老哥,求指点指点。

    27 条回复    2020-02-27 02:51:32 +08:00
    sleepm
        1
    sleepm  
       2020-02-26 23:43:02 +08:00 via Android   ❤️ 1
    直接改打包好的代码里的 baseUrl。。
    clf
        2
    clf  
       2020-02-26 23:59:04 +08:00   ❤️ 1
    你说的哪个 baseUrl……是网络请求库的 baseUrl 还是 Vue build 生成文件时的 baseUrl 还是啥?

    baseUrl 原来的值大致是怎么样的(如果有 IP 或域名就用`IP 地址`或`域名`代替,也不会泄露)

    原来 Vue 前端路由是怎么样配置的

    现在网站要求的大致结构层级是怎么样的

    求助的时候麻烦交代清楚这些问题……不然我除了吃瓜也不知道回复你什么。
    Beebird
        3
    Beebird  
       2020-02-27 00:00:22 +08:00
    不懂 vue,但理论上 nginx 的 rewrite 应该可以做到啊,楼主讲得太简略了不好判断。
    rockyou12
        4
    rockyou12  
       2020-02-27 00:02:44 +08:00
    难道你 vue 源码还能吧 baseUrl 写死 ip 嘛,不然应该随便改的
    fniy
        5
    fniy  
       2020-02-27 00:16:45 +08:00
    没有明白为什么实现不了。做 301 跳转,配置参考:
    server {
    listen 80;
    rewrite ^/(.*) http://web.com/$1 permanent;
    }
    airyland
        6
    airyland  
       2020-02-27 00:31:22 +08:00
    源码没了你搜索到相关位置不也可以改。
    badtypea
        7
    badtypea  
    OP
       2020-02-27 00:36:13 +08:00
    @sleepm 就是找不到...
    badtypea
        8
    badtypea  
    OP
       2020-02-27 00:46:42 +08:00
    @lychs1998 哈,不好意思,因为找不到以前负责的人我也不知道原来值是什么。原项目是 8.8.8.8 (举例)直接访问 vue 项目,现在客户是要求加个首页,首页用 8.8.8.8 访问,然后首页能跳转 8.8.8.8/example 下访问 vue。我虽然在 nginx 配置了 8.8.8.8/example 但却 vue 页面却是空白的,只能查到要改 bulid 时 vue.config.js 的 baseUrl,但没源码就很无语...
    badtypea
        9
    badtypea  
    OP
       2020-02-27 00:48:32 +08:00
    @fniy 可能是我不会用,太菜了
    ss098
        10
    ss098  
       2020-02-27 01:02:22 +08:00   ❤️ 1
    Vue 提供的模板是默认部署到根目录的,如果你可以访问 example 而页面空白,我推测是页面所需的资源文件仍以根目录请求。

    你可以试试添加 HTML base 标签指定资源目录为 example。
    asmoker
        11
    asmoker  
       2020-02-27 01:10:45 +08:00 via Android
    是不是需要加 tryfiles ?

    加了一级目录,但是原项目静态资源路径应该还是根的,根据把静态资源再单独处理下。
    badtypea
        12
    badtypea  
    OP
       2020-02-27 01:27:27 +08:00
    @ss098 多谢提醒,想起来 example 页面的 index.html 之前是无法读取同目录下 css、js 目录的文件的,我把这些目录移到根目录下控制台才没报错,但是却一片空白。base 标签没用过,貌似无法直接根据目录找到资源...
    badtypea
        13
    badtypea  
    OP
       2020-02-27 01:29:37 +08:00
    @asmoker 原 nginx 配置有加,我发个类似的配置出来
    badtypea
        14
    badtypea  
    OP
       2020-02-27 01:30:16 +08:00
    server {
    listen 80;

    # 新增首页
    location / {
    alias /zh-helper/;
    try_files $uri $uri/ /index.html last;
    }

    # 后台项目
    location /zh-admin {
    alias /zh-helper/zhanheng-funding-helper-admin/dist/;
    try_files $uri $uri/ /index.html last;
    }
    # 后台项目
    location /example{
    # proxy_pass http://zhanheng-funding-helper.oss-cn-shenzhen.aliyuncs.com;
    # proxy_hide_header Content-Disposition;
    alias /zh-helper/zhanheng-funding-helper/dist/;
    try_files $uri $uri/ /index.html;
    }
    sodatea
        15
    sodatea  
       2020-02-27 01:37:38 +08:00   ❤️ 1
    在编译后的代码里找 l.p="/" 然后替换掉引号里的内容。
    sodatea
        16
    sodatea  
       2020-02-27 01:41:59 +08:00   ❤️ 1
    如果用了 vue-router 的话那编译后的代码里应该还有一处 base:"/" 也替换掉
    inpro
        17
    inpro  
       2020-02-27 01:42:41 +08:00 via iPhone   ❤️ 1
    这个如果可以找到 Vue 打包后的 publicPath 可解,看了下这个值可能是 “”,就比较麻烦了,只配置 nginx,即使 /example 访问到了 Vue,Vue Router 也会将 /example 看作是 Vue 内部路由而显示白屏。倒是有个变通的办法,如果不要求一定是 /example 的话,可以将 / 配置为首页,当访问 / 时,检测有没有带 frontpage_loaded 这个 Cookie,如果没有(客户首次访问),返回首页,如果有,返回 Vue。首页跳转 Vue 的按钮在点击时设置这个 Cookie,并跳转 /?任意查询字符串,nginx 监测到 Cookie 返回 Vue,这个方案的缺点是 1 需要 Cookie 支持 2 客户只会看到一次首页,下次访问首页时看到的是 Vue
    inpro
        18
    inpro  
       2020-02-27 01:45:20 +08:00 via iPhone
    @badtypea 楼上的方法比较好,我以为地址的变量会在编译时 uglify 掉
    badtypea
        19
    badtypea  
    OP
       2020-02-27 02:13:45 +08:00
    @sodatea 嗯,找到了 i.p 跟 base,然后都改成了 "/example",但访问还是空白,也没报错
    badtypea
        20
    badtypea  
    OP
       2020-02-27 02:15:18 +08:00
    @inpro 谢谢提供方案,到时跟客户讨论看看,虽然估计会被 pass 掉
    badtypea
        21
    badtypea  
    OP
       2020-02-27 02:33:24 +08:00
    @sodatea 多谢老哥!可以了,这我真的是人傻了,改的是原目录的,一下子没想起来现在读取的是我自己放到根目录的 JS 文件。终于可以安心合眼了,感谢!
    also24
        22
    also24  
       2020-02-27 02:36:43 +08:00   ❤️ 1
    先把 『一片空白』的原因搞清楚再去折腾 nginx。

    不要改 nginx,直接把整个前端项目先丢进子目录;
    Chrome 打开开发者模式,访问相应子目录页面;
    清缓存,刷新页面,查看 network 标签。

    此时着重观察:
    1、有多少静态资源出错,出错的原因是域名不一致还是路径问题?
    2、有多少 xhr 请求出错,出错的原因是域名不一致还是路径问题?

    先把以上问题搞清楚,再继续下一步。

    在整个前端项目里,全局搜索相应的 域名( IP )/接口 ,寻找已被编译的配置文件或死代码。
    根据前面观察的结果,进行针对性修改。
    badtypea
        23
    badtypea  
    OP
       2020-02-27 02:42:52 +08:00
    @also24 嗯,这下已经都清楚了,一片空白就是因为没法设置 baseUrl 为 "/example",能找到打包后改的位置就可以了,一般也没我这么惨连源码都没...虽然此贴已结,这么晚了还帮忙分析多谢啦。
    also24
        24
    also24  
       2020-02-27 02:44:50 +08:00
    @badtypea #23
    我回帖中的 『在整个前端项目里搜索』是无论打包前后的代码都可以做的。
    also24
        25
    also24  
       2020-02-27 02:47:35 +08:00   ❤️ 1
    补充一下,如果 baseurl 配置为 "/" 可能会遇到匹配太多导致无法搜索的情况。
    此时还有一个方法就是 Chrome 控制台内,对每一个 xhr 请求都有相应的 js 调用链,可以通过跟踪这个调用链找出 URL 是在什么地方拼接的。
    badtypea
        26
    badtypea  
    OP
       2020-02-27 02:49:47 +08:00
    @also24 是可以做,但是没经验就不知道要搜索什么,因为打包后搜 baseUrl 是没结果的,而且还有 vue-router,这之后就知道可以直接搜索 "/"了,虽然对应的键还是不知道啥意思 ,但我估计以后也不用上了吧,希望用不上 233
    badtypea
        27
    badtypea  
    OP
       2020-02-27 02:51:32 +08:00
    @also24 哦,这个可以,学到了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1142 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:34 · PVG 07:34 · LAX 15:34 · JFK 18:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.