打包 gwt 客户端代码时丢失样式

Question

我使用 GWT 创建了一个网站，它完全由客户端代码组成。 .gwt.xml 文件是：

<?xml version="1.0" encoding="UTF-8"?>
<!--
  When updating your version of GWT, you should also update this DTD reference,
  so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.1//EN" "http://gwtproject.org/doctype/2.8.1/gwt-module.dtd">
<module rename-to='arithmeticexercisegeneratorclient'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.google.gwt.json.JSON'/>

    <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <inherits name="com.vaadin.polymer.Elements"/>

  <!-- Other module inherits                                      -->
  <inherits name='com.github.nmorel.gwtjackson.GwtJackson'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.onelostlogician.generator.exercise.arithmetic.client.ArithmeticExerciseGeneratorClient'/>

  <!-- Specify the paths for translatable code                    -->
  <!--<source path='client'/>-->

  <!-- allow Super Dev Mode -->
  <add-linker name="xsiframe"/>
</module>

当我运行应用程序处于 devmode (mvn clean war:exploded gwt:devmode) 时，它看起来如我所料:

但是当我打包代码并在浏览器中打开生成的网页时，它失去了所有 styling/formatting:

基础html文件是

<!doctype html>
<html>
<head>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
  <link type="text/css" rel="stylesheet" href="ArithmeticExerciseGeneratorClient.css">
  <script type="text/javascript" src="arithmeticexercisegeneratorclient/arithmeticexercisegeneratorclient.nocache.js"></script>
</head>
<body>
  <div id="clientContent"></div>
  <noscript>
    <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
      Your web browser must have JavaScript enabled
      in order for this application to display correctly.
    </div>
  </noscript>
</body>
</html>

Answer 1

简单（但不太可能回答）您的浏览器缓存了一些奇怪的东西，尝试执行 Ctrl+F5 并查看是否可以修复它。

然后检查网络面板，如果您看到任何 404 错误，在这种情况下，您就找到了缺失的那块拼图。

最后你可以做一个 "mvn clean package" 然后深入 WAR 找出你正在寻找的缺失的 CSS 在哪里。

EDIT:

你发现了恶作剧！

问题在于file://；通过 HTTP(s) 访问这些文件，一切正常。

要进行快速测试，您可以简单地将文件上传到服务器；或者使用 php -S ... (docs).

创建一个快速而肮脏的本地服务器

打包 gwt 客户端代码时丢失样式

Lose style when package gwt client code

css

gwt

maven

polymer