fes.js/guide/builder.html

23 lines
34 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vite 和 Webpack 双构建 | Fes.js</title>
<meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload stylesheet" href="/fes.js/assets/style.ac894a04.css" as="style">
<script type="module" src="/fes.js/assets/app.33deb0d9.js"></script>
<link rel="preload" href="/fes.js/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/fes.js/assets/chunks/framework.6405946a.js">
<link rel="modulepreload" href="/fes.js/assets/chunks/theme.4e2c27dd.js">
<link rel="modulepreload" href="/fes.js/assets/guide_builder.md.05caa694.lean.js">
<link rel="icon" href="/logo.png">
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-f9b5f00b><!--[--><!--]--><!--[--><span tabindex="-1" data-v-70a46d63></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-70a46d63> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f9b5f00b data-v-12b35336><div class="VPNavBar has-sidebar" data-v-12b35336 data-v-42a4554e><div class="container" data-v-42a4554e><div class="title" data-v-42a4554e><div class="VPNavBarTitle has-sidebar" data-v-42a4554e data-v-18a3716a><a class="title" href="/fes.js/" data-v-18a3716a><!--[--><!--]--><!--[--><img class="VPImage logo" src="/fes.js/logo.png" alt data-v-775d0342><!--]--><!--[-->Fes.js<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-42a4554e><div class="curtain" data-v-42a4554e></div><div class="content-body" data-v-42a4554e><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-42a4554e><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-42a4554e data-v-b19b1a4e><span id="main-nav-aria-label" class="visually-hidden" data-v-b19b1a4e>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/fes.js/guide/" tabindex="0" data-v-b19b1a4e data-v-63c8d736 data-v-6ef2cdaa><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/config/" tabindex="0" data-v-b19b1a4e data-v-63c8d736 data-v-6ef2cdaa><!--[-->编译时配置<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/api/" tabindex="0" data-v-b19b1a4e data-v-63c8d736 data-v-6ef2cdaa><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/plugin/" tabindex="0" data-v-b19b1a4e data-v-63c8d736 data-v-6ef2cdaa><!--[-->插件<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/cli/index.html" tabindex="0" data-v-b19b1a4e data-v-63c8d736 data-v-6ef2cdaa><!--[-->CLI<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-b19b1a4e data-v-32ed3423><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-32ed3423><span class="text" data-v-32ed3423><!----> v3.0.17 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-32ed3423><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-32ed3423><div class="VPMenu" data-v-32ed3423 data-v-8e93cae7><div class="items" data-v-8e93cae7><!--[--><!--[--><div class="VPMenuLink" data-v-8e93cae7 data-v-93c535d7><a class="VPLink link" href="https://fesjs.mumblefe.cn/2.0/" target="_blank" rel="noreferrer" data-v-93c535d7 data-v-6ef2cdaa><!--[-->v2.0<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-6ef2cdaa><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8e93cae7 data-v-93c535d7><a class="VPLink link" href="https://fesjs.mumblefe.cn/1.0/" target="_blank" rel="noreferrer" data-v-93c535d7 data-v-6ef2cdaa><!--[-->v1.0<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-6ef2cdaa><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-b19b1a4e data-v-32ed3423><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-32ed3423><span class="text" data-v-32ed3423><!----> 了解更多 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-32ed3423><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-32ed3423><div class="VPMenu" data-v-32ed3423 data-v-8e93cae7><div class="items" data-v-8e93cae7><!--[--><!--[--><div class="VPMenuLink" data-v-8e93cae7 data-v-93c535d7><a class="VPLink link" href="https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-93c535d7 data-v-6ef2cdaa><!--[-->更新日志<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-6ef2cdaa><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-8e93cae7 data-v-93c535d7><a class="VPLink link" href="http://fes-design.mumblefe.cn/" target="_blank" rel="noreferrer" data-v-93c535d7 data-v-6ef2cdaa><!--[-->fes-design<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-6ef2cdaa><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-42a4554e data-v-12f9be9f><label title="toggle dark mode" data-v-12f9be9f data-v-c2239e3a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-c2239e3a data-v-c8fc56f0><span class="check" data-v-c8fc56f0><span class="icon" data-v-c8fc56f0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-c2239e3a><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-c2239e3a><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-42a4554e data-v-0451f6aa data-v-06f2e395><!--[--><a class="VPSocialLink" href="https://github.com/WeBankFinTech/fes.js" aria-label="github" target="_blank" rel="noopener" data-v-06f2e395 data-v-e92cc2ea><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-42a4554e data-v-aaa91d14 data-v-32ed3423><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-32ed3423><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-32ed3423><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-32ed3423><div class="VPMenu" data-v-32ed3423 data-v-8e93cae7><!----><!--[--><!--[--><!----><div class="group" data-v-aaa91d14><div class="item appearance" data-v-aaa91d14><p class="label" data-v-aaa91d14>Appearance</p><div class="appearance-action" data-v-aaa91d14><label title="toggle dark mode" data-v-aaa91d14 data-v-c2239e3a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-c2239e3a data-v-c8fc56f0><span class="check" data-v-c8fc56f0><span class="icon" data-v-c8fc56f0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-c2239e3a><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-c2239e3a><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div></div></div><div class="group" data-v-aaa91d14><div class="item social-links" data-v-aaa91d14><div class="VPSocialLinks social-links-list" data-v-aaa91d14 data-v-06f2e395><!--[--><a class="VPSocialLink" href="https://github.com/WeBankFinTech/fes.js" aria-label="github" target="_blank" rel="noopener" data-v-06f2e395 data-v-e92cc2ea><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-42a4554e data-v-d0de5480><span class="container" data-v-d0de5480><span class="top" data-v-d0de5480></span><span class="middle" data-v-d0de5480></span><span class="bottom" data-v-d0de5480></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-f9b5f00b data-v-249347f2><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-249347f2><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-249347f2><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-249347f2>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-249347f2 data-v-7a9f5254><button data-v-7a9f5254>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-f9b5f00b data-v-39628ddc><div class="curtain" data-v-39628ddc></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-39628ddc><span class="visually-hidden" id="sidebar-aria-label" data-v-39628ddc> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-39628ddc><section class="VPSidebarItem level-0" data-v-39628ddc data-v-9f090638><div class="item" role="button" tabindex="0" data-v-9f090638><div class="indicator" data-v-9f090638></div><h2 class="text" data-v-9f090638>开始</h2><!----></div><div class="items" data-v-9f090638><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/index.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>介绍</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/getting-started.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>快速上手</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-39628ddc><section class="VPSidebarItem level-0 has-active" data-v-39628ddc data-v-9f090638><div class="item" role="button" tabindex="0" data-v-9f090638><div class="indicator" data-v-9f090638></div><h2 class="text" data-v-9f090638>基础</h2><!----></div><div class="items" data-v-9f090638><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/directory-structure.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>目录结构</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/builder.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>Vite 和 Webpack 双构建</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/config.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>编译时配置</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/runtime-config.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>运行时配置</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/env.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>环境变量</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/route.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>路由</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/plugin.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>插件</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/template.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>HTML 模板</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/mock.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>Mock 数据</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/upgrade3.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>从 2.0.x 迁移到 3.0.x</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-39628ddc><section class="VPSidebarItem level-0" data-v-39628ddc data-v-9f090638><div class="item" role="button" tabindex="0" data-v-9f090638><div class="indicator" data-v-9f090638></div><h2 class="text" data-v-9f090638>样式和资源文件</h2><!----></div><div class="items" data-v-9f090638><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/image.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>使用图片</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/css.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>使用 css</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/public.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>静态资源</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-39628ddc><section class="VPSidebarItem level-0" data-v-39628ddc data-v-9f090638><!----><div class="items" data-v-9f090638><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/contributing.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>贡献指南</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9f090638 data-v-9f090638><div class="item" data-v-9f090638><div class="indicator" data-v-9f090638></div><a class="VPLink link link" href="/fes.js/guide/faq.html" data-v-9f090638 data-v-6ef2cdaa><!--[--><p class="text" data-v-9f090638>常见问题</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f9b5f00b data-v-66e8e5a4><div class="VPDoc has-sidebar has-aside" data-v-66e8e5a4 data-v-5e5ade4b><!--[--><!--]--><div class="container" data-v-5e5ade4b><div class="aside" data-v-5e5ade4b><div class="aside-curtain" data-v-5e5ade4b></div><div class="aside-container" data-v-5e5ade4b><div class="aside-content" data-v-5e5ade4b><div class="VPDocAside" data-v-5e5ade4b data-v-e6b229cb><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-e6b229cb data-v-5608054c><div class="content" data-v-5608054c><div class="outline-marker" data-v-5608054c></div><div class="outline-title" data-v-5608054c>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-5608054c><span class="visually-hidden" id="doc-outline-aria-label" data-v-5608054c> Table of Contents for current page </span><ul class="root" data-v-5608054c data-v-9aec7383><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-e6b229cb></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-5e5ade4b><div class="content-container" data-v-5e5ade4b><!--[--><!--]--><!----><main class="main" data-v-5e5ade4b><div style="position:relative;" class="vp-doc _fes_js_guide_builder" data-v-5e5ade4b><div><h1 id="vite-和-webpack-双构建" tabindex="-1">Vite 和 Webpack 双构建 <a class="header-anchor" href="#vite-和-webpack-双构建" aria-label="Permalink to &quot;Vite 和 Webpack 双构建&quot;"></a></h1><p><code>Fes.js@3.0.x</code> 版本支持 Vite 和 Webpack 两种构建方式,不再内置构建方式,需要开发者自行选择:</p><ul><li>选用 Vite 构建,安装 <code>npm i @fesjs/builder-vite</code> 依赖即可。</li><li>选用 Webpack 构建,安装 <code>npm i @fesjs/builder-webpack</code> 依赖即可。</li></ul><h2 id="使用差异" tabindex="-1">使用差异 <a class="header-anchor" href="#使用差异" aria-label="Permalink to &quot;使用差异&quot;"></a></h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装,开发者关心的构建配置不会太多。从使用上来说,主要存在以下几个差异点:</p><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to &quot;配置&quot;"></a></h3><p>Webpack 和 Vite 构建在配置方面有一些差异,具体可以查看<a href="./../reference/config/">配置</a></p><h3 id="静态文件处理" tabindex="-1">静态文件处理 <a class="header-anchor" href="#静态文件处理" aria-label="Permalink to &quot;静态文件处理&quot;"></a></h3><p>由于 Vite 的限制,不支持 <code>require</code> 语法,具体 Vite 的用法可以查看<a href="https://cn.vitejs.dev/guide/assets.html" target="_blank" rel="noreferrer">官网</a></p><h3 id="html-模版" tabindex="-1">html 模版 <a class="header-anchor" href="#html-模版" aria-label="Permalink to &quot;html 模版&quot;"></a></h3><p>html 模版比较常规的需求例如模版变量Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求, Webpack 可以使用 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noreferrer">html-webpack-plugin</a>Vite 使用<a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noreferrer">vite-plugin-html</a> 进行个性化配置。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div></div></div></main><footer class="VPDocFooter" data-v-5e5ade4b data-v-e1ad1475><!--[--><!--]--><!----><div class="prev-next" data-v-e1ad1475><div class="pager" data-v-e1ad1475><a class="pager-link prev" href="/fes.js/guide/directory-structure.html" data-v-e1ad1475><span class="desc" data-v-e1ad1475>Previous page</span><span class="title" data-v-e1ad1475>目录结构</span></a></div><div class="has-prev pager" data-v-e1ad1475><a class="pager-link next" href="/fes.js/guide/config.html" data-v-e1ad1475><span class="desc" data-v-e1ad1475>Next page</span><span class="title" data-v-e1ad1475>编译时配置</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-f9b5f00b data-v-a11678a2><div class="container" data-v-a11678a2><p class="message" data-v-a11678a2>Released under the MIT License.</p><p class="copyright" data-v-a11678a2>Copyright © 2020-present Webank</p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_contributing.md\":\"fbe0c80f\",\"guide_css.md\":\"d85c3e62\",\"guide_mock.md\":\"b68a288b\",\"guide_plugin.md\":\"1546986c\",\"guide_public.md\":\"a0e12a19\",\"guide_env.md\":\"56a329d8\",\"guide_route.md\":\"4f50db50\",\"guide_runtime-config.md\":\"d5975866\",\"guide_template.md\":\"8c24c049\",\"guide_builder.md\":\"05caa694\",\"reference_api_index.md\":\"00a1161a\",\"reference_api.md\":\"730c6842\",\"guide_faq.md\":\"bbbbcfac\",\"reference_config_index.md\":\"b1c69de8\",\"guide_index.md\":\"9062da6f\",\"reference_plugin_dev_index.md\":\"a387e2a7\",\"reference_plugin_index.md\":\"825ca1d7\",\"reference_plugin_plugins_editor.md\":\"ee626d64\",\"reference_plugin_plugins_icon.md\":\"8b3b2297\",\"reference_plugin_plugins_jest.md\":\"05f57360\",\"reference_plugin_plugins_layout.md\":\"b0ad7720\",\"reference_plugin_plugins_locale.md\":\"04a35919\",\"reference_plugin_plugins_pinia.md\":\"2f77fc84\",\"reference_plugin_plugins_qiankun.md\":\"ae9723ba\",\"reference_plugin_plugins_request-4.md\":\"82b12411\",\"reference_plugin_plugins_sass.md\":\"dfed77bd\",\"reference_plugin_plugins_swc.md\":\"4fe5d079\",\"reference_plugin_plugins_vuex.md\":\"fde7d292\",\"reference_plugin_plugins_watermark.md\":\"2bac5f24\",\"reference_plugin_plugins_windicss.md\":\"ad5b65a1\",\"guide_directory-structure.md\":\"ed7766df\",\"guide_image.md\":\"2558c3b4\",\"reference_plugin_dev_api.md\":\"caf0c121\",\"reference_plugin_plugins_access.md\":\"fb85d87c\",\"guide_upgrade3.md\":\"9cd6ea78\",\"index.md\":\"a8ddadca\",\"guide_getting-started.md\":\"819278bc\",\"guide_config.md\":\"d6b0e93b\",\"reference_plugin_plugins_enums.md\":\"28eaa6aa\",\"reference_plugin_plugins_login.md\":\"fe8cf904\",\"reference_plugin_plugins_request.md\":\"3de9ce26\",\"reference_plugin_plugins_model.md\":\"f9382e16\",\"reference_cli_index.md\":\"4675dbfa\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Fes.js\",\"description\":\"一个好用的前端应用解决方案\",\"base\":\"/fes.js/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/WeBankFinTech/fes.js\"}],\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"编译时配置\",\"link\":\"/reference/config/\"},{\"text\":\"API\",\"link\":\"/reference/api/\"},{\"text\":\"插件\",\"link\":\"/reference/plugin/\",\"activeMatch\":\"/plugin/\"},{\"text\":\"CLI\",\"link\":\"/reference/cli/index.md\"},{\"text\":\"v3.0.17\",\"items\":[{\"text\":\"v2.0\",\"link\":\"https://fesjs.mumblefe.cn/2.0/\"},{\"text\":\"v1.0\",\"link\":\"https://fesjs.mumblefe.cn/1.0/\"}]},{\"text\":\"了解更多\",\"items\":[{\"text\":\"更新日志\",\"link\":\"https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md\"},{\"text\":\"fes-design\",\"link\":\"http://fes-design.mumblefe.cn/\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/index.md\"},{\"text\":\"快速上手\",\"link\":\"/guide/getting-started.md\"}]},{\"text\":\"基础\",\"items\":[{\"text\":\"目录结构\",\"link\":\"/guide/directory-structure.md\"},{\"text\":\"Vite 和 Webpack 双构建\",\"link\":\"/guide/builder.md\"},{\"text\":\"编译时配置\",\"link\":\"/guide/config.md\"},{\"text\":\"运行时配置\",\"link\":\"/guide/runtime-config.md\"},{\"text\":\"环境变量\",\"link\":\"/guide/env.md\"},{\"text\":\"路由\",\"link\":\"/guide/route.md\"},{\"text\":\"插件\",\"link\":\"/guide/plugin.md\"},{\"text\":\"HTML 模板\",\"link\":\"/guide/template.md\"},{\"text\":\"Mock 数据\",\"link\":\"/guide/mock.md\"},{\"text\":\"从 2.0.x 迁移到 3.0.x\",\"link\":\"/guide/upgrade3.md\"}]},{\"text\":\"样式和资源文件\",\"items\":[{\"text\":\"使用图片\",\"link\":\"/guide/image.md\"},{\"text\":\"使用 css\",\"link\":\"/guide/css.md\"},{\"text\":\"静态资源\",\"link\":\"/guide/public.md\"}]},{\"text\":\"贡献指南\",\"link\":\"/guide/contributing.md\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq.md\"}],\"/reference/plugin/\":[{\"text\":\"介绍\",\"link\":\"/reference/plugin/index.md\"},{\"text\":\"Plugins\",\"items\":[{\"text\":\"@fesjs/plugin-access\",\"link\":\"/reference/plugin/plugins/access.md\"},{\"text\":\"@fesjs/plugin-enums\",\"link\":\"/reference/plugin/plugins/enums.md\"},{\"text\":\"@fesjs/plugin-icon\",\"link\":\"/reference/plugin/plugins/icon.md\"},{\"text\":\"@fesjs/plugin-jest\",\"link\":\"/reference/plugin/plugins/jest.md\"},{\"text\":\"@fesjs/plugin-layout\",\"link\":\"/reference/plugin/plugins/layout.md\"},{\"text\":\"@fesjs/plugin-locale\",\"link\":\"/reference/plugin/plugins/locale.md\"},{\"text\":\"@fesjs/plugin-model\",\"link\":\"/reference/plugin/plugins/model.md\"},{\"text\":\"@fesjs/plugin-request\",\"link\":\"/reference/plugin/plugins/request.md\"},{\"text\":\"@fesjs/plugin-vuex\",\"link\":\"/reference/plugin/plugins/vuex.md\"},{\"text\":\"@fesjs/plugin-qiankun\",\"link\":\"/reference/plugin/plugins/qiankun.md\"},{\"text\":\"@fesjs/plugin-windicss\",\"link\":\"/reference/plugin/plugins/windicss.md\"},{\"text\":\"@fesjs/plugin-sass\",\"link\":\"/reference/plugin/plugins/sass.md\"},{\"text\":\"@fesjs/plugin-editor\",\"link\":\"/reference/plugin/plugins/editor.md\"},{\"text\":\"@fesjs/plugin-pinia\",\"link\":\"/reference/plugin/plugins/pinia.md\"},{\"text\":\"@fesjs/plugin-watermark\",\"link\":\"/reference/plugin/plugins/watermark.md\"},{\"text\":\"@fesjs/plugin-login\",\"link\":\"/reference/plugin/plugins/login.md\"},{\"text\":\"@fesjs/plugin-swc\",\"link\":\"/reference/plugin/plugins/swc.md\"}]},{\"text\":\"插件开发\",\"items\":[{\"text\":\"插件介绍\",\"link\":\"/reference/plugin/dev/index.md\"},{\"text\":\"插件API\",\"link\":\"/reference/plugin/dev/api.md\"}]}]},\"outline\":{\"label\":\"本页目录\"},\"search\":{\"provider\":\"local\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2020-present Webank\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
</body>
</html>