V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
NGINX
NGINX Trac
3rd Party Modules
Security Advisories
CHANGES
OpenResty
ngx_lua
Tengine
在线学习资源
NGINX 开发从入门到精通
NGINX Modules
ngx_echo
badtypea
V2EX  ›  NGINX

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

  •  
  •   badtypea · Feb 26, 2020 · 5623 views
    This topic created in 2254 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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

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

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

    求助的时候麻烦交代清楚这些问题……不然我除了吃瓜也不知道回复你什么。
    Beebird
        3
    Beebird  
       Feb 27, 2020
    不懂 vue,但理论上 nginx 的 rewrite 应该可以做到啊,楼主讲得太简略了不好判断。
    rockyou12
        4
    rockyou12  
       Feb 27, 2020
    难道你 vue 源码还能吧 baseUrl 写死 ip 嘛,不然应该随便改的
    fniy
        5
    fniy  
       Feb 27, 2020
    没有明白为什么实现不了。做 301 跳转,配置参考:
    server {
    listen 80;
    rewrite ^/(.*) http://web.com/$1 permanent;
    }
    airyland
        6
    airyland  
       Feb 27, 2020
    源码没了你搜索到相关位置不也可以改。
    badtypea
        7
    badtypea  
    OP
       Feb 27, 2020
    @sleepm 就是找不到...
    badtypea
        8
    badtypea  
    OP
       Feb 27, 2020
    @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
       Feb 27, 2020
    @fniy 可能是我不会用,太菜了
    ss098
        10
    ss098  
       Feb 27, 2020   ❤️ 1
    Vue 提供的模板是默认部署到根目录的,如果你可以访问 example 而页面空白,我推测是页面所需的资源文件仍以根目录请求。

    你可以试试添加 HTML base 标签指定资源目录为 example。
    asmoker
        11
    asmoker  
       Feb 27, 2020 via Android
    是不是需要加 tryfiles ?

    加了一级目录,但是原项目静态资源路径应该还是根的,根据把静态资源再单独处理下。
    badtypea
        12
    badtypea  
    OP
       Feb 27, 2020
    @ss098 多谢提醒,想起来 example 页面的 index.html 之前是无法读取同目录下 css、js 目录的文件的,我把这些目录移到根目录下控制台才没报错,但是却一片空白。base 标签没用过,貌似无法直接根据目录找到资源...
    badtypea
        13
    badtypea  
    OP
       Feb 27, 2020
    @asmoker 原 nginx 配置有加,我发个类似的配置出来
    badtypea
        14
    badtypea  
    OP
       Feb 27, 2020
    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  
       Feb 27, 2020   ❤️ 1
    在编译后的代码里找 l.p="/" 然后替换掉引号里的内容。
    sodatea
        16
    sodatea  
       Feb 27, 2020   ❤️ 1
    如果用了 vue-router 的话那编译后的代码里应该还有一处 base:"/" 也替换掉
    inpro
        17
    inpro  
       Feb 27, 2020 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  
       Feb 27, 2020 via iPhone
    @badtypea 楼上的方法比较好,我以为地址的变量会在编译时 uglify 掉
    badtypea
        19
    badtypea  
    OP
       Feb 27, 2020
    @sodatea 嗯,找到了 i.p 跟 base,然后都改成了 "/example",但访问还是空白,也没报错
    badtypea
        20
    badtypea  
    OP
       Feb 27, 2020
    @inpro 谢谢提供方案,到时跟客户讨论看看,虽然估计会被 pass 掉
    badtypea
        21
    badtypea  
    OP
       Feb 27, 2020
    @sodatea 多谢老哥!可以了,这我真的是人傻了,改的是原目录的,一下子没想起来现在读取的是我自己放到根目录的 JS 文件。终于可以安心合眼了,感谢!
    also24
        22
    also24  
       Feb 27, 2020   ❤️ 1
    先把 『一片空白』的原因搞清楚再去折腾 nginx。

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

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

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

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