Umi: 本地开发环境下，怎么将 umi.css 和 umi.js 的路径改为相对路径，publicPath 设置无效

[laixstx]

本地开发环境下，我的站点是一个子站点 /site1/*
通过 nginx 配置 子站点 /site1 到我的 端口 localhost:8000
但是 index.html 里面的 /umi.css /umi.js 是绝对路径，
我想他们的路径是相对路径 ./umi.css ./umi.js

现在我 .umirc.js中配置了

base: './',
publicPath: './',

但是没有起作用，这个 publicPath 的配置需要在 build 之后才起作用

相关环境信息

• Umi 版本：2.4.2
• Node 版本：v10.15.3
• 操作系统：win10

[imhele]

https://umijs.org/zh/guide/deploy.html#%E9%83%A8%E7%BD%B2-html-%E5%88%B0%E9%9D%9E%E6%A0%B9%E7%9B%AE%E5%BD%95

https://umijs.org/zh/config/#base

[laixstx]

https://umijs.org/zh/guide/deploy.html#%E9%83%A8%E7%BD%B2-html-%E5%88%B0%E9%9D%9E%E6%A0%B9%E7%9B%AE%E5%BD%95

https://umijs.org/zh/config/#base

我已经配置了 base 和 publicPath 都是 './'了，还是没有用啊，

在本地开发环境下，umi dev，路径仍然是绝对路径的

[laixstx]

怎么这么着急 closed 的 （--||）

[imhele]

配置了 runtimePublicPath 需要在 html 里指定 window.publicPath

<script>
window.publicPath = <%= YOUR PUBLIC_PATH %>
</script>

[laixstx]

配置了 runtimePublicPath 需要在 html 里指定 window.publicPath

<script>
window.publicPath = <%= YOUR PUBLIC_PATH %>
</script>

一开始我以为 runtimePublicPath 可以将 umi dev 之后的 html 的 js 和 css 设置成相对路径，之后发现这个设置没用，所以已经去掉 runtimePublicPath 的配置了。

现在主要的问题是，
在本地开发，umi dev 之后，期望的是 html 中那些自动插入的 umi.js 、umi.css 等脚本和样式文件，可以是相对路径，但是不管怎么设置，都是绝对路径

似乎 publicPath: './' 的配置，只有 umi build 才有用，umi dev 是没有用的

[imhele]

你是希望在 umi dev 开发环境的同时配合 nginx 使用吗？

[laixstx]

你是希望在 umi dev 开发环境的同时配合 nginx 使用吗？

我是在希望 umi dev 开发环境中，可以将 umi.js 等文件的加载路径 设置成 相对路径。

[imhele]

似乎没有能满足你需求的配置，runtimePublicPath 也是 build 后生效的。你是在什么场景下遇到的这种需求呢？

[laixstx]

似乎没有能满足你需求的配置，runtimePublicPath 也是 build 后生效的。你是在什么场景下遇到的这种需求呢？

目前我的本地开发环境是 http://localhost:8000，
然后使用 nignx 做了个代理，
配置当访问 http://localhost/site1/ 时,重定向到 http://localhost:8000，
但是由于 umi dev 之后的 umi.js、umi.css 等文件，都是绝对路径，所以就加载不了这些 js 和 css 文件了

[imhele]

一般没有直接把 umi dev 放到 nginx 后面做测试的情况。如果必须使用，你可以在 nginx 配置 rewrite 规则，将静态资源 ^/(.*) rewrite 到 localhost:8000/$1

[laixstx]

一般没有直接把 umi dev 放到 nginx 后面做测试的情况。如果必须使用，你可以在 nginx 配置 rewrite 规则，将静态资源 ^/(.*) rewrite 到 localhost:8000/$1

好的，我明白了，非常感谢 大大 的耐心解答 :）

[GithubGoldMiner]

@laixstx 你好啊，我之前也遇到了这个问题，我把publicPath修改成'/site1/'后边带斜线，js和css就可以直接读到了

[oufeng]

业务中也确实有这个需求，用umi做新业务嵌入到主业务中。这里记录一下我的解决方案。

好奇问一下，为何不将umi的静态资源添加上前缀。nextjs这里做得就比较好，所有的静态资源都以_next/开头。umi不考虑一下静态资源都以_umi开头吗？

• 假设test.local.com(192.168.2.19:3000)是主站点,test.local.com/v2-web(192.168.2.19:8000)是子站点。
• 如果用docker的方式使用ngxin的话建议不要写localhost或者127.0.0.1

# http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files
server {
    listen  80;
    server_name test.local.com;

    # 删除所有URL上的尾斜杠
    # rewrite ^/(.*)/$ /$1 permanent;

    # 删除尾斜杆
    rewrite ^/v2-web/$ /v2-web permanent;

    # 将/v2-web开头的请求代理到umi服务
    location /v2-web {
      proxy_pass http://192.168.2.19:8000;
    }

    location @umi-static {
      proxy_pass http://192.168.2.19:8000;
    }

    location / {
      proxy_pass http://192.168.2.19:3000;
      # https://stackoverflow.com/questions/37962804/may-i-use-two-named-locations-within-try-files-nginx-directive

      # Determines whether proxied responses with codes greater than or equal to 300 should be passed to a client or be intercepted and redirected to nginx for processing with the error_page directive.
      proxy_intercept_errors on;
      # Enables or disables doing several redirects using the error_page directive. The number of such redirects is limited.
      recursive_error_pages on;
      error_page 404 = @umi-static;
    }
}

[amio]

对照 publicPath = '/' 是绝度路径，
把 publicPath = '' 处理为相对路径的话也是很符合直觉的，希望支持一下

[amio]

@laixstx 你好啊，我之前也遇到了这个问题，我把publicPath修改成'/site1/'后边带斜线，js和css就可以直接读到了

如果希望支持灵活的子路径，同时跑在 /site1/ 和 /site2/ 路径下，这样配置就不行了，只能给每个需要支持的路径都编译一份。还是需要支持相对路径的。

[LhrAlander]

不知道还有没有人有这个问题，可以用chainwebpack来更改output.publicPath，具体配置如下：

chainWebpack: (config, { webpack }) => {
    config.output.publicPath('/site1/')
  }