Question

我甚至不知道从哪里开始解决此问题，因此任何一般提示都会有所帮助。

我在我的Ubuntu机器上创建了一些简单的React页面（仅限前端;静态;使用create-react-app）。我正在创建一个优化的构建，他们在线移动它。

如果您想在浏览器中查看它是否有效，页面就在此处：static website

当我在我的Ubuntu机器上使用Chrome或Firefox浏览器时，页面和React组件看起来很好。

但是，当我在Windows 7计算机上使用Chrome或Firefox浏览器时，该页面无法正常运行。具体来说，除顶级组件外，没有一个React组件出现，并且显示的内容没有正确地用CSS格式化（我使用react-bootstrap进行格式化）。 / p>

这是我的一个Ubuntu浏览器上的页面：

web site working on Ubuntu browser

这是Windows上的同一站点：

web site not working in Windows browser

两个地方的控制台都没有错误消息。

我猜测有一些简单的事情，但我不能为我的生活找出它可能是什么。有什么想法吗？

注意

我在Ubuntu上的Chrome版本是63.0.3238.108（官方版本）（64位）。我在Windows上的Chrome版本是64.0.3282.140（官方版本）（64位）。

我将React Developer Tools作为两个版本的Chrome的扩展，并且都声明＆＃34;此页面使用的是React的生产版本。＆＃34;

额外的组件（未在Windows浏览器中显示）都可以通过状态更改来访问。以下是我拍摄的照片的完整代码：

注意 - 我确实改变了＃34; class＆＃34; to＆＃34; className，＆＃34;但Windows上的问题仍然存在。

import React, { Component } from 'react';
import { PageHeader, Tabs, Tab } from 'react-bootstrap';
import 'bootstrap/less/bootstrap.less';
import './index.css';

import HomePanel from './HomePanel';
import AboutPanel from './AboutPanel';
import BlogPanel from './BlogPanel';
import ProgramPanel from './ProgramPanel';
import GamePanel from './GamePanel';
import Footer from './Footer';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {key: 1};
  }
  handleSelect(key) {
    this.setState({key});
  }
  render() {
    return (
      <div>
        <header>
        <PageHeader>
          <h1 className="mainHeader">Aphorism 44</h1>
          <h3 className="mainHeader">Playing Around with Code...</h3>
        </PageHeader>
        <Tabs onSelect={ (e)=>this.handleSelect(e)} 
activeKey={this.state.key}>
          <Tab eventKey={1} title="Home"><HomePanel/></Tab>
          <Tab eventKey={2} title="About"><AboutPanel/></Tab>
          <Tab eventKey={3} title="Blogs"><BlogPanel/></Tab>
          <Tab eventKey={4} title="Programs"><ProgramPanel/></Tab>
          <Tab eventKey={5} title="Games"><GamePanel/></Tab>
        </Tabs>
        </header>
        <Footer/>
      </div>
    );
  }
}

export default App;

添加React Develop Tools后，我在两个操作系统上都出现以下控制台错误，但问题只出现在Windows上：

服务工作者注册期间出错：DOMException：仅允许安全来源。

Answer 1

Azium对于LESS文件是正确的。

我将其更改为常规的Bootstrap CSS文件，并导入该文件而不是LESS文件。

它再次起作用。

我不确定为什么它一开始就破了，但现在没关系。

为什么React页面在Ubuntu浏览器上看起来不错，而在Windows浏览器上看起来不错？

1 个答案: