pingan8787 / script-timestamp-webpack-plugin

script-timestamp-webpack-plugin 是 Webpack 一款插件,用来在 Webpack 打包项目后生成的 index.html 文件中,为生成 js 文件的添加时间戳。🔥
https://www.npmjs.com/package/script-timestamp-webpack-plugin
10 stars 3 forks source link

vue-cli3 运行后页面空白 #2

Open ghost opened 4 years ago

ghost commented 4 years ago
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
    <title>wenbo</title>
  </head>
  <body>

    <!--SetScriptTimestampPlugin inset script-->

    <noscript>
      <strong>We're sorry but wenbo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
const ScriptTimestampWebpackPlugin = require("script-timestamp-webpack-plugin");
module.exports = {
    configureWebpack:{
        plugins: [
          new ScriptTimestampWebpackPlugin()
        ]
    },
};

npm run serve 后打开界面空白。 控制台警告 The resource http://localhost:8080/app.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

另外: 发现原本html代码head标签内部不能有以下代码的任何一条:

    <meta http-equiv="Expires" content="-1"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-control" content="no-cache"/>
    <meta http-equiv="Cache" content="no-cache"/>

否则页面代码会变成这种结构

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
    <meta http-equiv="expires" content="-1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">
    <link rel="icon" href="/favicon.ico">
    <title>wenbo</title>
    <link href="/0.js" rel="prefetch">
    <link href="/1.js" rel="prefetch">
    <link href="/2.js" rel="prefetch">
    <link href="/3.js" rel="prefetch">
    <!-- <link href="/*.js" rel="prefetch"> ... -->
    <link href="/app.js" rel="preload" as="script">

    <!--SetScriptTimestampPlugin inset script-->

    <noscript>
        <strong>We're sorry but wenbo doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    </meta http-equiv="expires" content="-1">
</body>
</html>
pingan8787 commented 4 years ago

@zimluk 占位符改为 <!--script-timestamp-webpack-plugin inset script--> 试试。