能不能以简单易懂地方式，解释下前端的路由是怎么获得资源的。

[iblessyou]

后端，只用过最早 page.html 那种方式，现在的页面基本都是路由，比如 ip:8080/page
最近在配置 nginx ，以前的页面是 ip:8080/page ，
现在需要几个前端统一走一个端口，比如 80,

按想法就应该是在 80 服务下再配一个 web1 → ip:8080 ，
这样 ip:80/web1/page 就可以指向 ip:8080/page 了，后来发现这样只是能获取 html ，但不能获得 js 等资源。
js 资源显示的是 ip:80/page.js 。这样肯定是找不到的。

以前一直是知道这么不能弄，但不清楚为什么。
这次就特来请教下路由问题，另外就是问问如果不改前端路由，能否只从 nginx 实现这样的转发。

[yggd]

前端 build 的时候配置一下 base_url ?
用的什么写的

[niau]

nginx 的反向代理可以解决你的问题

[EyebrowsWhite]

前端打包的 html 中可能有类似这种代码
```
<script src="/page.js"><script>
```
如果只改 nginx 的话， 你需要匹配这个`page.js`然后反代，当然也可以直接匹配所有后缀是`.js` `.css`的静态文件。
即便不改，具体还是要看一下前端的代码

[murmur]

所以这就是新老项目交接的问题，上了 h5 的 history 模式路由，但是没有对应 nginx 配置

要么就 history 模式，解决一切烦恼，要么静态资源上 cdn ，也没有路径烦扰

[murmur]

更正 history->hash

[ming2050]

1. 改前端项目代码，配置一下资源文件 base/root 的基础路径，一般框架都可以的
2. 配置 nginx ，通过 rewrite 时下不同请求路径，请求不同的资源

[iblessyou]

@yggd vue

[iblessyou]

@EyebrowsWhite 匹配所有 js 等是肯定不行的，
因为现在有多个服务，web1 、web2 ，都是同样配置，
所以仅凭 ip:80/page.js ，并不能识别他是 web1 还是 web2 的 page.js 。
看来还是得前端改路由，统一添加 web1 的头。

@murmur 额，现在就是个后端在请教前端路由是怎么回事呢，你这样我只能不明觉厉啊 🤣

[murmur]

@iblessyou 我这个是一劳永逸的解决问题，hash 模式不需要配置 nginx ，所有浏览器兼容，nginx 配半天配不明白挺糟心的，你让前端切一下路由模式一个配置选项而已。

[tool2d]

@murmur 单页面是必须用 hash 做路由的，因为手机页面处理回退按键时，只能操作 history ，没别的好办法了。

[murmur]

改了 hash 模式之后，url 就变成了 index.html?#web1/page 因为 js css 都是相对于 index.html 的，后面的只是个书签，所以自然是相同路径，不会有资源找不到的问题

[murmur]

@tool2d 什么手机这么菜，我们的 app 就是用的 history 模式，history.go(-1)各种用也没问题，无论浏览器 h5 调试还是 app 的套壳

[murmur]

更正 history->hash

[zhhbstudio]

vue 打包后的获取 js 、css 等资源的 url 都是 /asstes/*****，所以所有的资源都是去 ip:80 取的

vue2 的话 vue-cli 打包参考这个 https://cli.vuejs.org/zh/config/#publicpath 设置一个 publicpath 打包后请求资源会到 /{{publicpath}}/assets/****

vue3 的话 vite 打包参考这个 https://cn.vitejs.dev/config/shared-options.html#base

有问题随时回复