fes.js/guide/builder.html

34 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress 2.0.0-beta.53">
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html, body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
</script>
<link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>支持 Vite 和 Webpack 双构建 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload" href="/fes.js/assets/style.2de37a47.css" as="style" /><link rel="stylesheet" href="/fes.js/assets/style.2de37a47.css" />
<link rel="modulepreload" href="/fes.js/assets/app.005e0daf.js"><link rel="modulepreload" href="/fes.js/assets/builder.html.999bf635.js"><link rel="modulepreload" href="/fes.js/assets/builder.html.e970d1bc.js"><link rel="prefetch" href="/fes.js/assets/index.html.bc74ee4c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.85db73e3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/config.html.5d92a440.js" as="script" /><link rel="prefetch" href="/fes.js/assets/contributing.html.24d74808.js" as="script" /><link rel="prefetch" href="/fes.js/assets/css.html.3990f0c1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/directory-structure.html.4960a3b9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/env.html.35aa0f1a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/faq.html.1e599082.js" as="script" /><link rel="prefetch" href="/fes.js/assets/getting-started.html.8eca842e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/image.html.20b52f7d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/mock.html.6d653289.js" as="script" /><link rel="prefetch" href="/fes.js/assets/plugin.html.ccfb9074.js" as="script" /><link rel="prefetch" href="/fes.js/assets/public.html.9d99cf84.js" as="script" /><link rel="prefetch" href="/fes.js/assets/route.html.aa1f3f0b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/runtime-config.html.d036f810.js" as="script" /><link rel="prefetch" href="/fes.js/assets/template.html.decb42ff.js" as="script" /><link rel="prefetch" href="/fes.js/assets/upgrade3.html.0ae06c8e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.20695f57.js" as="script" /><link rel="prefetch" href="/fes.js/assets/cli.html.b37682a1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.35cddc8c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.82e50780.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.74321f46.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.d460e0cc.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.b3f98887.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.b17fa30f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/access.html.701eacb0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/editor.html.2fb88cf1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/enums.html.7c55aefa.js" as="script" /><link rel="prefetch" href="/fes.js/assets/icon.html.d2dc60da.js" as="script" /><link rel="prefetch" href="/fes.js/assets/jest.html.de551700.js" as="script" /><link rel="prefetch" href="/fes.js/assets/layout.html.bccb8e74.js" as="script" /><link rel="prefetch" href="/fes.js/assets/locale.html.4d3b3790.js" as="script" /><link rel="prefetch" href="/fes.js/assets/login.html.2f0338ab.js" as="script" /><link rel="prefetch" href="/fes.js/assets/model.html.fab33d63.js" as="script" /><link rel="prefetch" href="/fes.js/assets/pinia.html.1e6ca3bb.js" as="script" /><link rel="prefetch" href="/fes.js/assets/qiankun.html.deb33c50.js" as="script" /><link rel="prefetch" href="/fes.js/assets/request.html.fe4ceade.js" as="script" /><link rel="prefetch" href="/fes.js/assets/sass.html.177ef37c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/swc.html.a56bb9f7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/vuex.html.36df398e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/watermark.html.855d80c4.js" as="script" /><link rel="prefetch" href="/fes.js/assets/windicss.html.cc303ad2.js" as="script" /><link rel="prefetch" href="/fes.js/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.1f2b7059.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.174811be.js" as="script" /><link rel="prefetch" href="/fes.js/assets/config.html.3c4760e9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/contributing.html.8cad4b5e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/css.html.a45df14e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/directory-structure.html.15096386.js" as="script" /><link rel="prefetch" href="/fes.js/assets/env.html.805df8a5.js" as="script" /><link rel="prefetch" href="/fes.js/assets/faq.html.f70ba546.js" as="script" /><link rel="prefetch" href="/fes.js/assets/getting-started.html.3b600666.js" as="script" /><link rel="prefetch" href="/fes.js/assets/image.html.58aa17c7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/mock.html.9cef5d45.js" as="script" /><link rel="prefetch" href="/fes.js/assets/plugin.html.0095f814.js" as="script" /><link rel="prefetch" href="/fes.js/assets/public.html.848eef99.js" as="script" /><link rel="prefetch" href="/fes.js/assets/route.html.3d217616.js" as="script" /><link rel="prefetch" href="/fes.js/assets/runtime-config.html.c81fa63e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/template.html.91640404.js" as="script" /><link rel="prefetch" href="/fes.js/assets/upgrade3.html.3629ebda.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.3fadc9c0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/cli.html.768b01bb.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.8a34550e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.5f811d7d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.c22810d3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.7417ac5c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.7e2b22df.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.1aa2bbfa.js" as="script" /><link rel="prefetch" href="/fes.js/assets/access.html.2783c102.js" as="script" /><link rel="prefetch" href="/fes.js/assets/editor.html.604dae94.js" as="script" /><link rel="prefetch" href="/fes.js/assets/enums.html.e894dfd6.js" as="script" /><link rel="prefetch" href="/fes.js/assets/icon.html.c524fb7f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/jest.html.9bcb2ce1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/layout.html.b7ee50eb.js" as="script" /><link rel="prefetch" href="/fes.js/assets/locale.html.c1dcd857.js" as="script" /><link rel="prefetch" href="/fes.js/assets/login.html.0ea4b7ad.js" as="script" /><link rel="prefetch" href="/fes.js/assets/model.html.3cd49de2.js" as="script" /><link rel="prefetch" href="/fes.js/assets/pinia.html.1eb91490.js" as="script" /><link rel="prefetch" href="/fes.js/assets/qiankun.html.b3592391.js" as="script" /><link rel="prefetch" href="/fes.js/assets/request.html.f4de04c7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/sass.html.9338147b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/swc.html.0bd38fed.js" as="script" /><link rel="prefetch" href="/fes.js/assets/vuex.html.6d094802.js" as="script" /><link rel="prefetch" href="/fes.js/assets/watermark.html.1d51b560.js" as="script" /><link rel="prefetch" href="/fes.js/assets/windicss.html.17e40609.js" as="script" /><link rel="prefetch" href="/fes.js/assets/404.html.ef11e76b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.0b6f9a66.js" as="script" />
</head>
<body>
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><img class="logo" src="/fes.js/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/fes.js/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.5"><span class="title">v3.0.5</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.5"><span class="title">v3.0.5</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/fes.js/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.5"><span class="title">v3.0.5</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.5"><span class="title">v3.0.5</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/builder.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/guide/builder.html#使用差异" class="router-link-active router-link-exact-active sidebar-item" aria-label="使用差异"><!--[--><!--]--> 使用差异 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/guide/builder.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/builder.html#静态文件处理" class="router-link-active router-link-exact-active sidebar-item" aria-label="静态文件处理"><!--[--><!--]--> 静态文件处理 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/guide/builder.html#html-模版" class="router-link-active router-link-exact-active sidebar-item" aria-label="html 模版"><!--[--><!--]--> html 模版 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/fes.js/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/fes.js/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="支持-vite-和-webpack-双构建" tabindex="-1"><a class="header-anchor" href="#支持-vite-和-webpack-双构建" aria-hidden="true">#</a> 支持 Vite 和 Webpack 双构建</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-hidden="true">#</a> 使用差异</h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装,开发者关心的构建配置不会太多。从使用上来说,主要存在以下几个差异点:</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>Webpack 和 Vite 构建在配置方面有一些差异,具体可以查看<a href="../reference/config">配置</a></p><h3 id="静态文件处理" tabindex="-1"><a class="header-anchor" href="#静态文件处理" aria-hidden="true">#</a> 静态文件处理</h3><p>由于 Vite 的限制,不支持 <code>require</code> 语法,具体 Vite 的用法可以查看<a href="https://cn.vitejs.dev/guide/assets.html" target="_blank" rel="noopener noreferrer">官网<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></p><h3 id="html-模版" tabindex="-1"><a class="header-anchor" href="#html-模版" aria-hidden="true">#</a> html 模版</h3><p>html 模版比较常规的需求例如模版变量Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求, Webpack 可以使用 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noopener noreferrer">html-webpack-plugin<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>Vite 使用<a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noopener noreferrer">vite-plugin-html<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 进行个性化配置。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/builder.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/directory-structure.html" class="" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/config.html" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div>
<script type="module" src="/fes.js/assets/app.005e0daf.js" defer></script>
</body>
</html>