routing - 如何在 Polymer Starter Kit 中设置 baseUrl？

Question

Polymer Starter Kit(轻量版)如何设置baseUrl？

(类似:Serving Polymer App to a /path not at root)

我想在子文件夹中运行它(dl 和解压缩的 PSK 在那里，服务器是 xampp):

http://localhost/test/psk/app/

当我转到该 URL 时，应用会重定向到:

http://localhost/

附上这张便条:

Can't find: http://localhost/test/psk/app/#!/test/psk/app/. Redirected you to Home Page Ok

没有控制台错误，除了 URL 问题外，应用程序运行正常。

这里是app.js:

// Sets app default base URL
  app.baseUrl = '/';

  if (window.location.port === '') {  // if production
    // Uncomment app.baseURL below and
    // set app.baseURL to '/your-pathname/' if running from folder in production
    // app.baseUrl = '/polymer-starter-kit/';


   // If this is baseURL:
   //app.baseUrl = 'http://localhost/test/psk/app/';
   //Then click on the menu -  reloads the page with 404 URL:
   //http://localhost/test/psk/app/users
  }
  ...

和routing.html

<script src="../bower_components/page/page.js"></script>
<script>
  window.addEventListener('WebComponentsReady', function() {

      console.log('routing.html');

    // We use Page.js for routing. This is a Micro
    // client-side router inspired by the Express router
    // More info: https://visionmedia.github.io/page.js/

    // Removes end / from app.baseUrl which page.base requires for production
    if (window.location.port === '') {  // if production
      page.base(app.baseUrl.replace(/\/$/, ''));
       console.log("app.baseUrl");
       console.log(app.baseUrl);
    }

    // Middleware
    function scrollToTop(ctx, next) {
      app.scrollPageToTop();
      next();
    }

    function closeDrawer(ctx, next) {
      app.closeDrawer();
      next();
    }

    function setFocus(selected){
      document.querySelector('section[data-route="' + selected + '"] .page-title').focus();
    }

    // Routes
    page('*', scrollToTop, closeDrawer, function(ctx, next) {
      next();
    });

    page('/', function() {
      app.route = 'home';
      setFocus(app.route);
    });

    page(app.baseUrl, function() {
      app.route = 'home';
      setFocus(app.route);
    });

    page('/users', function() {
      app.route = 'users';
      setFocus(app.route);
    });

    page('/users/:name', function(data) {
      app.route = 'user-info';
      app.params = data.params;
      setFocus(app.route);
    });

    page('/contact', function() {
      app.route = 'contact';
      setFocus(app.route);
    });

    // 404
    page('*', function() {
      app.$.toast.text = 'Can\'t find: ' + window.location.href  + '. Redirected you to Home Page';
      app.$.toast.show();
      page.redirect(app.baseUrl);
    });

    // add #! before urls
    page({
      hashbang: true
    });

  });
</script>

Answer 1

我绝不假装在这里给出明确的答案。

我不认为从子文件夹运行目前有效。我尝试了几种黑客攻击(设置 app.baseUrl、黑客路由、使用 page.base() 的各种组合)都没有结果，我暂时放弃了。

高分子网站https://elements.polymer-project.org/elements/app-route claim (在撰写本文时):

app-route 0.9.1

app-route is an element that enables declarative, self-describing routing for a web app.

n.b. app-route is still in beta. We expect it will need some changes. We're counting on your feedback!

到目前为止，我所经历的(并希望分享)是:您可以直接从文件运行您的应用程序，从网络服务器的根目录或从非标准 http 端口的根目录(调试您的应用程序)您可以使用 python http 模块或其他一些用于静态文件的小型服务器，这些文件可以以时尚的方式工作http://localhost:port)部署将需要相同的约束。

建议的运行方法:https://www.polymer-project.org/1.0/start/toolbox/set-up#serve-your-project

我没有尝试的是使用 .htaccess 重写 URL base(理论上可以工作，但它真的很慢，因为这种应用程序的应用程序路由计算/ react 不应该发生在服务器端，但发生在客户端，并且仅适用于像服务器这样的 apache，而且最不需要的是，您将失去客户端上下文)

老实说，我宁愿在这个问题上被证明是错误的。 ;)