跳至内容

单页面应用程序

除了通用/同构应用程序，Razzle 还可构建单页面（或仅限客户端的）应用程序。要执行此操作，请从 src 文件夹中移除 index.js 和 server.js，并在 public 文件夹内创建一个 index.html 文件，模板如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="<%= process.env.PUBLIC_PATH %>favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <%= htmlWebpackPlugin.tags.headTags %>
  <!--
      Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "<%= process.env.PUBLIC_PATH %>/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>

最后，将 buildType 传递给 razzle.config.js 选项，如下所示

'use strict';
module.exports = {
  options: {
    buildType: 'spa',
  }
};

这实际上将 Razzle 转变为 create-react-app。