当前端的SPA应用不是部署在域名的根目录下，而是部署在某个context path下时，需要特别注意资源、路由、接口等请求路径。

资源H2

资源主要指是的index.html 中引用的webpack bundle、页面的以路径方式引用的图片等静态资源等。

在路由使用hash的路由模式下，可以使用相对路径来解决。

history模式下，由于当前路径目前并不是固定的，因此必须使用绝对路径。通常的实现方式是定义环境变量，然后在打包时替换。

ReactH3

create-react-app中，.evn 中定义PUBLIC_URL ，Javascript代码通过process.env.PUBLIC_URL 来引用

jsx
render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

NOTE: 💡 如果使用了相对路径，还要注意页面是否设置了<base href=/ > ，因为如果做了该设置，相对路径都是基于该路径进行生成的。

路由H2

同样，在history模式下，当前URL不仅仅包含应用的path，还包含环境的context。为了让路径组件正常工作，需要做一些配置。

ReactH3

react-router可以指定basename参数

jsx
<BrowserRouter basename={process.env.PUBLIC_URL}>
      <Switch>
        <Route exact path={'/demo'} component={HomePage} />
        <Route path={'/admin'} component={withSecued(AdminLayout)} />
        <Route component={NotFoundPage} />
      </Switch>
      <GlobalStyle />
    </BrowserRouter>
  );

VueH3

vue-router可以指定base参数

jsx
export default () => {
  return new Router({
    routes,
    mode: 'history', 
    base: '/base/'
  })
}

接口H2

如果接口依赖与前端环境进行接口转发，转发的路径前缀也应该配置成环境变量。

ReactH3

create-react-app中可以配置REACT_APP开头的环境变量、NODE_ENV、PUBLIC_URL ，可以通过

process.env. 来获取