首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在聚合物启动器试剂盒中设置baseUrl?

如何在聚合物启动器试剂盒中设置baseUrl?
EN

Stack Overflow用户
提问于 2016-05-18 11:41:26
回答 2查看 2.2K关注 0票数 3

如何在聚合物起动机试剂盒(轻型版本)中设置baseUrl?

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

我想在子文件夹(dl和unzipped PSK,server是xampp)中运行它:

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

当我转到那个URL时,应用程序将重定向到:

http://localhost/

本说明如下:

找不到:http://localhost/test/psk/app/#!/test/psk/app/。把你转到主页Ok

没有控制台错误,应用程序可以正常工作,除了URL问题。

这里是app.js

代码语言:javascript
运行
复制
// 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

代码语言:javascript
运行
复制
<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>
EN

回答 2

Stack Overflow用户

发布于 2016-05-21 18:08:56

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

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

聚合物场地https://elements.polymer-project.org/elements/app-route索赔(在撰写本报告时):

app路线0.9.1 应用路由是一种元素,它支持web应用程序的声明性、自描述性路由. n.b.应用程序路线仍处于测试阶段。我们预计它将需要一些改变。我们指望你的反馈!

因此,我到目前为止所经历的(并希望分享)是:要么您将直接从文件、web服务器的根或非标准http端口上的根运行应用程序(要调试您的应用程序,您可以使用python模块或其他用于在时尚http://localhost:port中工作的静态文件的小型服务器)部署将需要同样的约束。

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

我没有尝试的是使用.htaccess重写URL库(理论上可以工作,但是非常慢,因为这类应用的应用路线计算/反应不应该发生在服务器端,而应该发生在客户端,并且只适用于apache一样的服务器,而且最不需要的情况下,您将失去客户端上下文)

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

票数 1
EN

Stack Overflow用户

发布于 2016-07-07 19:26:05

当不使用端口号(即在生产中)时,设置app.baseUrl

app.js

代码语言:javascript
运行
复制
// 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 = '/base-url/you/want/to/use/';  // <- Set this here
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37298557

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档