[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fadvanced":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fadvanced":2561,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fadvanced":2587},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":2557,"stem":2558,"id":2559,"extension":2560},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fadvanced","进阶配置","Vite 进阶：server.proxy、resolve.alias、SSR、多页面、库模式、vite preview 等。环境变量见 env。","技能小册",[12,13],"vite","advanced","2022-05-08",false,{"type":17,"value":18,"toc":2546},"minimark",[19,22,45,50,59,65,106,121,265,273,276,306,309,316,326,390,398,408,496,500,506,513,708,712,719,793,801,804,945,949,955,962,1059,1070,1078,1196,1202,1206,1213,1220,1320,1327,1333,1492,1502,1514,1593,1599,1602,1686,1690,1697,1848,1851,1855,1866,1963,1967,1974,2192,2196,2218,2222,2228,2234,2264,2267,2349,2356,2360,2485,2488,2491,2494,2542],[20,21,8],"h1",{"id":8},[23,24,25,26,30,31,34,35,38,39,44],"p",{},"Vite 进阶：",[27,28,29],"code",{},"server.proxy","、",[27,32,33],{},"resolve.alias","、SSR、多页面、库模式、",[27,36,37],{},"vite preview"," 等。环境变量见 ",[40,41,43],"a",{"href":42},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fenv","env","。",[46,47,49],"h3",{"id":48},"一环境变量","一、环境变量",[51,52,54,55,58],"h4",{"id":53},"_1-importmetaenv-及其类型扩展","1. ",[27,56,57],{},"import.meta.env"," 及其类型扩展",[23,60,61,62,64],{},"Vite 使用 ",[27,63,57],{}," 暴露环境变量，默认包含：",[66,67,68,82,88,94,100],"ul",{},[69,70,71,74,75,30,78,81],"li",{},[27,72,73],{},"import.meta.env.MODE","：当前模式（如 ",[27,76,77],{},"development",[27,79,80],{},"production","）",[69,83,84,87],{},[27,85,86],{},"import.meta.env.BASE_URL","：应用部署的基础路径",[69,89,90,93],{},[27,91,92],{},"import.meta.env.PROD","：是否为生产环境",[69,95,96,99],{},[27,97,98],{},"import.meta.env.DEV","：是否为开发环境",[69,101,102,105],{},[27,103,104],{},"import.meta.env.SSR","：是否为服务端渲染环境",[23,107,108,112,113,116,117,120],{},[109,110,111],"strong",{},"类型扩展","：在 ",[27,114,115],{},"src\u002Fvite-env.d.ts"," 或 ",[27,118,119],{},"env.d.ts"," 中添加类型声明，获得 TypeScript 提示。",[122,123,128],"pre",{"className":124,"code":125,"language":126,"meta":127,"style":127},"language-ts shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F\u002F \u003Creference types=\"vite\u002Fclient\" \u002F>\n\ninterface ImportMetaEnv {\n  readonly VITE_API_BASE: string;\n  readonly VITE_APP_TITLE: string;\n}\n\ninterface ImportMeta {\n  readonly env: ImportMetaEnv;\n}\n","ts","",[27,129,130,168,175,190,211,225,231,236,246,260],{"__ignoreMap":127},[131,132,135,139,143,147,151,155,159,163,165],"span",{"class":133,"line":134},"line",1,[131,136,138],{"class":137},"sutJx","\u002F\u002F\u002F ",[131,140,142],{"class":141},"sdyVB","\u003C",[131,144,146],{"class":145},"stz_E","reference",[131,148,150],{"class":149},"sXwxC"," types",[131,152,154],{"class":153},"sVHd0","=",[131,156,158],{"class":157},"s2W-s","\"",[131,160,162],{"class":161},"s9ymX","vite\u002Fclient",[131,164,158],{"class":157},[131,166,167],{"class":141}," \u002F>\n",[131,169,171],{"class":133,"line":170},2,[131,172,174],{"emptyLinePlaceholder":173},true,"\n",[131,176,178,182,186],{"class":133,"line":177},3,[131,179,181],{"class":180},"sbsja","interface",[131,183,185],{"class":184},"sbgvK"," ImportMetaEnv",[131,187,189],{"class":188},"sP7_E"," {\n",[131,191,193,196,200,204,208],{"class":133,"line":192},4,[131,194,195],{"class":180},"  readonly",[131,197,199],{"class":198},"sucvu"," VITE_API_BASE",[131,201,203],{"class":202},"smGrS",":",[131,205,207],{"class":206},"sZMiF"," string",[131,209,210],{"class":188},";\n",[131,212,214,216,219,221,223],{"class":133,"line":213},5,[131,215,195],{"class":180},[131,217,218],{"class":198}," VITE_APP_TITLE",[131,220,203],{"class":202},[131,222,207],{"class":206},[131,224,210],{"class":188},[131,226,228],{"class":133,"line":227},6,[131,229,230],{"class":188},"}\n",[131,232,234],{"class":133,"line":233},7,[131,235,174],{"emptyLinePlaceholder":173},[131,237,239,241,244],{"class":133,"line":238},8,[131,240,181],{"class":180},[131,242,243],{"class":184}," ImportMeta",[131,245,189],{"class":188},[131,247,249,251,254,256,258],{"class":133,"line":248},9,[131,250,195],{"class":180},[131,252,253],{"class":198}," env",[131,255,203],{"class":202},[131,257,185],{"class":184},[131,259,210],{"class":188},[131,261,263],{"class":133,"line":262},10,[131,264,230],{"class":188},[51,266,268,269,272],{"id":267},"_2-envmode-文件的加载优先级","2. ",[27,270,271],{},".env.[mode]"," 文件的加载优先级",[23,274,275],{},"Vite 根据当前模式加载对应的环境文件，优先级从低到高：",[66,277,278,284,290,301],{},[69,279,280,283],{},[27,281,282],{},".env","（所有环境通用）",[69,285,286,289],{},[27,287,288],{},".env.local","（被 git 忽略）",[69,291,292,294,295,30,298,81],{},[27,293,271],{},"（如 ",[27,296,297],{},".env.development",[27,299,300],{},".env.production",[69,302,303],{},[27,304,305],{},".env.[mode].local",[23,307,308],{},"后面的文件会覆盖前面的同名变量。",[51,310,312,313,81],{"id":311},"_3-自定义前缀envprefix","3. 自定义前缀（",[27,314,315],{},"envPrefix",[23,317,318,319,322,323,325],{},"默认只有以 ",[27,320,321],{},"VITE_"," 开头的变量才会暴露给客户端。可以通过 ",[27,324,315],{}," 修改前缀，支持字符串或数组。",[122,327,331],{"className":328,"code":329,"language":330,"meta":127,"style":127},"language-js shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F vite.config.js\nexport default {\n  envPrefix: [\"VITE_\", \"CUSTOM_\"],\n};\n","js",[27,332,333,338,348,385],{"__ignoreMap":127},[131,334,335],{"class":133,"line":134},[131,336,337],{"class":137},"\u002F\u002F vite.config.js\n",[131,339,340,343,346],{"class":133,"line":170},[131,341,342],{"class":153},"export",[131,344,345],{"class":153}," default",[131,347,189],{"class":188},[131,349,350,354,356,360,363,366,368,371,374,377,379,382],{"class":133,"line":177},[131,351,353],{"class":352},"skxfh","  envPrefix",[131,355,203],{"class":188},[131,357,359],{"class":358},"su5hD"," [",[131,361,158],{"class":362},"sjJ54",[131,364,321],{"class":365},"s_sjI",[131,367,158],{"class":362},[131,369,370],{"class":188},",",[131,372,373],{"class":362}," \"",[131,375,376],{"class":365},"CUSTOM_",[131,378,158],{"class":362},[131,380,381],{"class":358},"]",[131,383,384],{"class":188},",\n",[131,386,387],{"class":133,"line":192},[131,388,389],{"class":188},"};\n",[51,391,393,394,397],{"id":392},"_4-在生产构建中静态替换define-选项","4. 在生产构建中静态替换（",[27,395,396],{},"define"," 选项）",[23,399,400,401,404,405,407],{},"构建时，",[27,402,403],{},"import.meta.env.VITE_*"," 会被静态替换为实际值。对于自定义全局常量，也可以使用 ",[27,406,396],{}," 进行硬替换。",[122,409,411],{"className":328,"code":410,"language":330,"meta":127,"style":127},"export default {\n  define: {\n    __APP_VERSION__: JSON.stringify(\"1.0.0\"),\n    \"process.env.NODE_ENV\": '\"production\"',\n  },\n};\n",[27,412,413,421,430,463,487,492],{"__ignoreMap":127},[131,414,415,417,419],{"class":133,"line":134},[131,416,342],{"class":153},[131,418,345],{"class":153},[131,420,189],{"class":188},[131,422,423,426,428],{"class":133,"line":170},[131,424,425],{"class":352},"  define",[131,427,203],{"class":188},[131,429,189],{"class":188},[131,431,432,435,437,441,444,448,451,453,456,458,461],{"class":133,"line":177},[131,433,434],{"class":352},"    __APP_VERSION__",[131,436,203],{"class":188},[131,438,440],{"class":439},"s_hVV"," JSON",[131,442,443],{"class":188},".",[131,445,447],{"class":446},"sGLFI","stringify",[131,449,450],{"class":358},"(",[131,452,158],{"class":362},[131,454,455],{"class":365},"1.0.0",[131,457,158],{"class":362},[131,459,460],{"class":358},")",[131,462,384],{"class":188},[131,464,465,468,472,474,476,479,482,485],{"class":133,"line":192},[131,466,467],{"class":362},"    \"",[131,469,471],{"class":470},"sZUrc","process.env.NODE_ENV",[131,473,158],{"class":362},[131,475,203],{"class":188},[131,477,478],{"class":362}," '",[131,480,481],{"class":365},"\"production\"",[131,483,484],{"class":362},"'",[131,486,384],{"class":188},[131,488,489],{"class":133,"line":213},[131,490,491],{"class":188},"  },\n",[131,493,494],{"class":133,"line":227},[131,495,389],{"class":188},[46,497,499],{"id":498},"二代理配置进阶","二、代理配置进阶",[51,501,54,503,505],{"id":502},"_1-serverproxy-基本配置",[27,504,29],{}," 基本配置",[23,507,508,509,512],{},"基于 ",[27,510,511],{},"http-proxy","，支持路径重写、修改 Cookie 域、自定义响应头。",[122,514,516],{"className":328,"code":515,"language":330,"meta":127,"style":127},"export default {\n  server: {\n    proxy: {\n      \"\u002Fapi\": {\n        target: \"http:\u002F\u002Flocalhost:3000\",\n        changeOrigin: true,\n        rewrite: (path) => path.replace(\u002F^\\\u002Fapi\u002F, \"\"),\n        cookieDomainRewrite: \"\", \u002F\u002F 清除 cookie domain\n        headers: { \"X-Custom\": \"value\" }, \u002F\u002F 添加请求头\n      },\n    },\n  },\n};\n",[27,517,518,526,535,544,558,574,587,641,655,687,692,698,703],{"__ignoreMap":127},[131,519,520,522,524],{"class":133,"line":134},[131,521,342],{"class":153},[131,523,345],{"class":153},[131,525,189],{"class":188},[131,527,528,531,533],{"class":133,"line":170},[131,529,530],{"class":352},"  server",[131,532,203],{"class":188},[131,534,189],{"class":188},[131,536,537,540,542],{"class":133,"line":177},[131,538,539],{"class":352},"    proxy",[131,541,203],{"class":188},[131,543,189],{"class":188},[131,545,546,549,552,554,556],{"class":133,"line":192},[131,547,548],{"class":362},"      \"",[131,550,551],{"class":470},"\u002Fapi",[131,553,158],{"class":362},[131,555,203],{"class":188},[131,557,189],{"class":188},[131,559,560,563,565,567,570,572],{"class":133,"line":213},[131,561,562],{"class":352},"        target",[131,564,203],{"class":188},[131,566,373],{"class":362},[131,568,569],{"class":365},"http:\u002F\u002Flocalhost:3000",[131,571,158],{"class":362},[131,573,384],{"class":188},[131,575,576,579,581,585],{"class":133,"line":227},[131,577,578],{"class":352},"        changeOrigin",[131,580,203],{"class":188},[131,582,584],{"class":583},"syTEX"," true",[131,586,384],{"class":188},[131,588,589,592,594,597,601,603,606,609,611,614,616,619,622,626,630,632,634,637,639],{"class":133,"line":233},[131,590,591],{"class":446},"        rewrite",[131,593,203],{"class":188},[131,595,596],{"class":188}," (",[131,598,600],{"class":599},"s99_P","path",[131,602,460],{"class":188},[131,604,605],{"class":180}," =>",[131,607,608],{"class":358}," path",[131,610,443],{"class":188},[131,612,613],{"class":446},"replace",[131,615,450],{"class":358},[131,617,618],{"class":362},"\u002F",[131,620,621],{"class":153},"^",[131,623,625],{"class":624},"sjYin","\\\u002F",[131,627,629],{"class":628},"sQRbd","api",[131,631,618],{"class":362},[131,633,370],{"class":188},[131,635,636],{"class":362}," \"\"",[131,638,460],{"class":358},[131,640,384],{"class":188},[131,642,643,646,648,650,652],{"class":133,"line":238},[131,644,645],{"class":352},"        cookieDomainRewrite",[131,647,203],{"class":188},[131,649,636],{"class":362},[131,651,370],{"class":188},[131,653,654],{"class":137}," \u002F\u002F 清除 cookie domain\n",[131,656,657,660,662,665,667,670,672,674,676,679,681,684],{"class":133,"line":248},[131,658,659],{"class":352},"        headers",[131,661,203],{"class":188},[131,663,664],{"class":188}," {",[131,666,373],{"class":362},[131,668,669],{"class":470},"X-Custom",[131,671,158],{"class":362},[131,673,203],{"class":188},[131,675,373],{"class":362},[131,677,678],{"class":365},"value",[131,680,158],{"class":362},[131,682,683],{"class":188}," },",[131,685,686],{"class":137}," \u002F\u002F 添加请求头\n",[131,688,689],{"class":133,"line":262},[131,690,691],{"class":188},"      },\n",[131,693,695],{"class":133,"line":694},11,[131,696,697],{"class":188},"    },\n",[131,699,701],{"class":133,"line":700},12,[131,702,491],{"class":188},[131,704,706],{"class":133,"line":705},13,[131,707,389],{"class":188},[51,709,711],{"id":710},"_2-多个代理规则的顺序与优先级","2. 多个代理规则的顺序与优先级",[23,713,714,715,718],{},"规则按顺序匹配，第一个匹配的规则生效。可以使用 ",[27,716,717],{},"^\u002Fapi\u002F"," 等更具体的路径提高优先级。",[122,720,722],{"className":328,"code":721,"language":330,"meta":127,"style":127},"proxy: {\n  '^\u002Fapi\u002Fusers': { target: 'http:\u002F\u002Fuser-service:3000' },\n  '\u002Fapi': { target: 'http:\u002F\u002Fdefault-service:3000' },\n}\n",[27,723,724,733,764,789],{"__ignoreMap":127},[131,725,726,729,731],{"class":133,"line":134},[131,727,728],{"class":184},"proxy",[131,730,203],{"class":188},[131,732,189],{"class":188},[131,734,735,738,741,743,746,749,752,754,756,759,761],{"class":133,"line":170},[131,736,737],{"class":362},"  '",[131,739,740],{"class":365},"^\u002Fapi\u002Fusers",[131,742,484],{"class":362},[131,744,745],{"class":352},": ",[131,747,748],{"class":188},"{",[131,750,751],{"class":352}," target",[131,753,203],{"class":188},[131,755,478],{"class":362},[131,757,758],{"class":365},"http:\u002F\u002Fuser-service:3000",[131,760,484],{"class":362},[131,762,763],{"class":188}," },\n",[131,765,766,768,770,772,774,776,778,780,782,785,787],{"class":133,"line":177},[131,767,737],{"class":362},[131,769,551],{"class":365},[131,771,484],{"class":362},[131,773,745],{"class":352},[131,775,748],{"class":188},[131,777,751],{"class":352},[131,779,203],{"class":188},[131,781,478],{"class":362},[131,783,784],{"class":365},"http:\u002F\u002Fdefault-service:3000",[131,786,484],{"class":362},[131,788,763],{"class":188},[131,790,791],{"class":133,"line":192},[131,792,230],{"class":188},[51,794,796,797,800],{"id":795},"_3-绕过代理bypass-函数","3. 绕过代理（",[27,798,799],{},"bypass"," 函数）",[23,802,803],{},"根据请求条件动态决定是否代理。",[122,805,807],{"className":328,"code":806,"language":330,"meta":127,"style":127},"proxy: {\n  '\u002Fapi': {\n    target: 'http:\u002F\u002Flocalhost:3000',\n    bypass(req, res, proxyOptions) {\n      if (req.headers.accept?.includes('html')) {\n        return '\u002Findex.html';   \u002F\u002F 不代理，返回本地文件\n      }\n    },\n  },\n},\n",[27,808,809,817,830,845,870,909,927,932,936,940],{"__ignoreMap":127},[131,810,811,813,815],{"class":133,"line":134},[131,812,728],{"class":184},[131,814,203],{"class":188},[131,816,189],{"class":188},[131,818,819,821,823,825,827],{"class":133,"line":170},[131,820,737],{"class":362},[131,822,551],{"class":365},[131,824,484],{"class":362},[131,826,745],{"class":352},[131,828,829],{"class":188},"{\n",[131,831,832,835,837,839,841,843],{"class":133,"line":177},[131,833,834],{"class":352},"    target",[131,836,203],{"class":188},[131,838,478],{"class":362},[131,840,569],{"class":365},[131,842,484],{"class":362},[131,844,384],{"class":188},[131,846,847,851,853,856,858,861,863,866,868],{"class":133,"line":192},[131,848,850],{"class":849},"sVXei","    bypass",[131,852,450],{"class":188},[131,854,855],{"class":599},"req",[131,857,370],{"class":188},[131,859,860],{"class":599}," res",[131,862,370],{"class":188},[131,864,865],{"class":599}," proxyOptions",[131,867,460],{"class":188},[131,869,189],{"class":188},[131,871,872,875,877,879,881,884,886,889,892,895,897,899,902,904,907],{"class":133,"line":213},[131,873,874],{"class":153},"      if",[131,876,596],{"class":352},[131,878,855],{"class":358},[131,880,443],{"class":188},[131,882,883],{"class":358},"headers",[131,885,443],{"class":188},[131,887,888],{"class":358},"accept",[131,890,891],{"class":188},"?.",[131,893,894],{"class":446},"includes",[131,896,450],{"class":352},[131,898,484],{"class":362},[131,900,901],{"class":365},"html",[131,903,484],{"class":362},[131,905,906],{"class":352},")) ",[131,908,829],{"class":188},[131,910,911,914,916,919,921,924],{"class":133,"line":227},[131,912,913],{"class":153},"        return",[131,915,478],{"class":362},[131,917,918],{"class":365},"\u002Findex.html",[131,920,484],{"class":362},[131,922,923],{"class":188},";",[131,925,926],{"class":137},"   \u002F\u002F 不代理，返回本地文件\n",[131,928,929],{"class":133,"line":233},[131,930,931],{"class":188},"      }\n",[131,933,934],{"class":133,"line":238},[131,935,697],{"class":188},[131,937,938],{"class":133,"line":248},[131,939,491],{"class":188},[131,941,942],{"class":133,"line":262},[131,943,944],{"class":188},"},\n",[46,946,948],{"id":947},"三路径别名","三、路径别名",[51,950,54,952,954],{"id":951},"_1-resolvealias-配置",[27,953,33],{}," 配置",[23,956,957,958,961],{},"支持对象形式或 ",[27,959,960],{},"{ find, replacement }"," 数组形式（用于更灵活的匹配）。",[122,963,965],{"className":328,"code":964,"language":330,"meta":127,"style":127},"export default {\n  resolve: {\n    alias: {\n      \"@\": \"\u002Fsrc\",\n      \"~\": path.resolve(__dirname, \".\u002Fsrc\"),\n    },\n  },\n};\n",[27,966,967,975,984,993,1013,1047,1051,1055],{"__ignoreMap":127},[131,968,969,971,973],{"class":133,"line":134},[131,970,342],{"class":153},[131,972,345],{"class":153},[131,974,189],{"class":188},[131,976,977,980,982],{"class":133,"line":170},[131,978,979],{"class":352},"  resolve",[131,981,203],{"class":188},[131,983,189],{"class":188},[131,985,986,989,991],{"class":133,"line":177},[131,987,988],{"class":352},"    alias",[131,990,203],{"class":188},[131,992,189],{"class":188},[131,994,995,997,1000,1002,1004,1006,1009,1011],{"class":133,"line":192},[131,996,548],{"class":362},[131,998,999],{"class":470},"@",[131,1001,158],{"class":362},[131,1003,203],{"class":188},[131,1005,373],{"class":362},[131,1007,1008],{"class":365},"\u002Fsrc",[131,1010,158],{"class":362},[131,1012,384],{"class":188},[131,1014,1015,1017,1020,1022,1024,1026,1028,1031,1034,1036,1038,1041,1043,1045],{"class":133,"line":213},[131,1016,548],{"class":362},[131,1018,1019],{"class":470},"~",[131,1021,158],{"class":362},[131,1023,203],{"class":188},[131,1025,608],{"class":358},[131,1027,443],{"class":188},[131,1029,1030],{"class":446},"resolve",[131,1032,1033],{"class":358},"(__dirname",[131,1035,370],{"class":188},[131,1037,373],{"class":362},[131,1039,1040],{"class":365},".\u002Fsrc",[131,1042,158],{"class":362},[131,1044,460],{"class":358},[131,1046,384],{"class":188},[131,1048,1049],{"class":133,"line":227},[131,1050,697],{"class":188},[131,1052,1053],{"class":133,"line":233},[131,1054,491],{"class":188},[131,1056,1057],{"class":133,"line":238},[131,1058,389],{"class":188},[51,1060,1062,1063,1066,1067,81],{"id":1061},"_2-注意别名冲突与-ide-配置同步tsconfigjson-的-paths","2. 注意别名冲突与 IDE 配置同步（",[27,1064,1065],{},"tsconfig.json"," 的 ",[27,1068,1069],{},"paths",[23,1071,1072,1073,1066,1075,1077],{},"在 TypeScript 项目中，需要同步 ",[27,1074,1065],{},[27,1076,1069],{}," 选项，保证 IDE 类型解析和 Vite 一致。",[122,1079,1083],{"className":1080,"code":1081,"language":1082,"meta":127,"style":127},"language-json shiki shiki-themes material-theme-lighter github-light github-dark","{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002F*\": [\"src\u002F*\"],\n      \"~\u002F*\": [\"src\u002F*\"]\n    }\n  }\n}\n","json",[27,1084,1085,1089,1105,1124,1136,1160,1182,1187,1192],{"__ignoreMap":127},[131,1086,1087],{"class":133,"line":134},[131,1088,829],{"class":188},[131,1090,1091,1095,1099,1101,1103],{"class":133,"line":170},[131,1092,1094],{"class":1093},"s39Yj","  \"",[131,1096,1098],{"class":1097},"sseR_","compilerOptions",[131,1100,158],{"class":1093},[131,1102,203],{"class":188},[131,1104,189],{"class":188},[131,1106,1107,1109,1112,1114,1116,1118,1120,1122],{"class":133,"line":177},[131,1108,467],{"class":1093},[131,1110,1111],{"class":206},"baseUrl",[131,1113,158],{"class":1093},[131,1115,203],{"class":188},[131,1117,373],{"class":362},[131,1119,443],{"class":365},[131,1121,158],{"class":362},[131,1123,384],{"class":188},[131,1125,1126,1128,1130,1132,1134],{"class":133,"line":192},[131,1127,467],{"class":1093},[131,1129,1069],{"class":206},[131,1131,158],{"class":1093},[131,1133,203],{"class":188},[131,1135,189],{"class":188},[131,1137,1138,1140,1144,1146,1148,1150,1152,1155,1157],{"class":133,"line":213},[131,1139,548],{"class":1093},[131,1141,1143],{"class":1142},"srdBf","@\u002F*",[131,1145,158],{"class":1093},[131,1147,203],{"class":188},[131,1149,359],{"class":188},[131,1151,158],{"class":362},[131,1153,1154],{"class":365},"src\u002F*",[131,1156,158],{"class":362},[131,1158,1159],{"class":188},"],\n",[131,1161,1162,1164,1167,1169,1171,1173,1175,1177,1179],{"class":133,"line":227},[131,1163,548],{"class":1093},[131,1165,1166],{"class":1142},"~\u002F*",[131,1168,158],{"class":1093},[131,1170,203],{"class":188},[131,1172,359],{"class":188},[131,1174,158],{"class":362},[131,1176,1154],{"class":365},[131,1178,158],{"class":362},[131,1180,1181],{"class":188},"]\n",[131,1183,1184],{"class":133,"line":233},[131,1185,1186],{"class":188},"    }\n",[131,1188,1189],{"class":133,"line":238},[131,1190,1191],{"class":188},"  }\n",[131,1193,1194],{"class":133,"line":248},[131,1195,230],{"class":188},[23,1197,1198,1199,44],{},"对于 JS 项目，可添加 ",[27,1200,1201],{},"jsconfig.json",[46,1203,1205],{"id":1204},"四服务端渲染ssr支持","四、服务端渲染（SSR）支持",[51,1207,54,1209,1212],{"id":1208},"_1-vite-build-ssr-构建服务端入口",[27,1210,1211],{},"vite build --ssr"," 构建服务端入口",[23,1214,1215,1216,1219],{},"使用 ",[27,1217,1218],{},"vite build --ssr src\u002Fentry-server.js"," 构建服务端 bundle（输出 CommonJS 或 ESM 格式）。",[122,1221,1223],{"className":328,"code":1222,"language":330,"meta":127,"style":127},"\u002F\u002F vite.config.js\nexport default {\n  build: {\n    ssr: true, \u002F\u002F 或在命令行指定\n    rollupOptions: {\n      input: \"src\u002Fentry-server.js\",\n      output: { format: \"cjs\" },\n    },\n  },\n};\n",[27,1224,1225,1229,1237,1246,1260,1269,1285,1308,1312,1316],{"__ignoreMap":127},[131,1226,1227],{"class":133,"line":134},[131,1228,337],{"class":137},[131,1230,1231,1233,1235],{"class":133,"line":170},[131,1232,342],{"class":153},[131,1234,345],{"class":153},[131,1236,189],{"class":188},[131,1238,1239,1242,1244],{"class":133,"line":177},[131,1240,1241],{"class":352},"  build",[131,1243,203],{"class":188},[131,1245,189],{"class":188},[131,1247,1248,1251,1253,1255,1257],{"class":133,"line":192},[131,1249,1250],{"class":352},"    ssr",[131,1252,203],{"class":188},[131,1254,584],{"class":583},[131,1256,370],{"class":188},[131,1258,1259],{"class":137}," \u002F\u002F 或在命令行指定\n",[131,1261,1262,1265,1267],{"class":133,"line":213},[131,1263,1264],{"class":352},"    rollupOptions",[131,1266,203],{"class":188},[131,1268,189],{"class":188},[131,1270,1271,1274,1276,1278,1281,1283],{"class":133,"line":227},[131,1272,1273],{"class":352},"      input",[131,1275,203],{"class":188},[131,1277,373],{"class":362},[131,1279,1280],{"class":365},"src\u002Fentry-server.js",[131,1282,158],{"class":362},[131,1284,384],{"class":188},[131,1286,1287,1290,1292,1294,1297,1299,1301,1304,1306],{"class":133,"line":233},[131,1288,1289],{"class":352},"      output",[131,1291,203],{"class":188},[131,1293,664],{"class":188},[131,1295,1296],{"class":352}," format",[131,1298,203],{"class":188},[131,1300,373],{"class":362},[131,1302,1303],{"class":365},"cjs",[131,1305,158],{"class":362},[131,1307,763],{"class":188},[131,1309,1310],{"class":133,"line":238},[131,1311,697],{"class":188},[131,1313,1314],{"class":133,"line":248},[131,1315,491],{"class":188},[131,1317,1318],{"class":133,"line":262},[131,1319,389],{"class":188},[51,1321,268,1323,1326],{"id":1322},"_2-ssrloadmodule-运行时加载模块",[27,1324,1325],{},"ssrLoadModule"," 运行时加载模块",[23,1328,1329,1330,1332],{},"在开发模式下，可以使用 ",[27,1331,1325],{}," 加载服务端模块，进行实时编译。",[122,1334,1336],{"className":328,"code":1335,"language":330,"meta":127,"style":127},"\u002F\u002F server.js\nconst { createServer } = require(\"vite\");\n\n(async () => {\n  const vite = await createServer();\n  const entry = await vite.ssrLoadModule(\"\u002Fsrc\u002Fentry-server.js\");\n  const html = await entry.render();\n  console.log(html);\n})();\n",[27,1337,1338,1343,1374,1378,1392,1412,1442,1464,1482],{"__ignoreMap":127},[131,1339,1340],{"class":133,"line":134},[131,1341,1342],{"class":137},"\u002F\u002F server.js\n",[131,1344,1345,1348,1350,1353,1356,1359,1362,1364,1366,1368,1370,1372],{"class":133,"line":170},[131,1346,1347],{"class":180},"const",[131,1349,664],{"class":188},[131,1351,1352],{"class":439}," createServer",[131,1354,1355],{"class":188}," }",[131,1357,1358],{"class":202}," =",[131,1360,1361],{"class":446}," require",[131,1363,450],{"class":358},[131,1365,158],{"class":362},[131,1367,12],{"class":365},[131,1369,158],{"class":362},[131,1371,460],{"class":358},[131,1373,210],{"class":188},[131,1375,1376],{"class":133,"line":177},[131,1377,174],{"emptyLinePlaceholder":173},[131,1379,1380,1382,1385,1388,1390],{"class":133,"line":192},[131,1381,450],{"class":358},[131,1383,1384],{"class":180},"async",[131,1386,1387],{"class":188}," ()",[131,1389,605],{"class":180},[131,1391,189],{"class":188},[131,1393,1394,1397,1400,1402,1405,1407,1410],{"class":133,"line":213},[131,1395,1396],{"class":180},"  const",[131,1398,1399],{"class":439}," vite",[131,1401,1358],{"class":202},[131,1403,1404],{"class":153}," await",[131,1406,1352],{"class":446},[131,1408,1409],{"class":352},"()",[131,1411,210],{"class":188},[131,1413,1414,1416,1419,1421,1423,1425,1427,1429,1431,1433,1436,1438,1440],{"class":133,"line":227},[131,1415,1396],{"class":180},[131,1417,1418],{"class":439}," entry",[131,1420,1358],{"class":202},[131,1422,1404],{"class":153},[131,1424,1399],{"class":358},[131,1426,443],{"class":188},[131,1428,1325],{"class":446},[131,1430,450],{"class":352},[131,1432,158],{"class":362},[131,1434,1435],{"class":365},"\u002Fsrc\u002Fentry-server.js",[131,1437,158],{"class":362},[131,1439,460],{"class":352},[131,1441,210],{"class":188},[131,1443,1444,1446,1449,1451,1453,1455,1457,1460,1462],{"class":133,"line":233},[131,1445,1396],{"class":180},[131,1447,1448],{"class":439}," html",[131,1450,1358],{"class":202},[131,1452,1404],{"class":153},[131,1454,1418],{"class":358},[131,1456,443],{"class":188},[131,1458,1459],{"class":446},"render",[131,1461,1409],{"class":352},[131,1463,210],{"class":188},[131,1465,1466,1469,1471,1474,1476,1478,1480],{"class":133,"line":238},[131,1467,1468],{"class":358},"  console",[131,1470,443],{"class":188},[131,1472,1473],{"class":446},"log",[131,1475,450],{"class":352},[131,1477,901],{"class":358},[131,1479,460],{"class":352},[131,1481,210],{"class":188},[131,1483,1484,1487,1490],{"class":133,"line":248},[131,1485,1486],{"class":188},"}",[131,1488,1489],{"class":358},")()",[131,1491,210],{"class":188},[51,1493,1495,1496,30,1499,81],{"id":1494},"_3-ssr-环境下的模块加载策略ssrnoexternalssrexternal","3. SSR 环境下的模块加载策略（",[27,1497,1498],{},"ssr.noExternal",[27,1500,1501],{},"ssr.external",[66,1503,1504,1509],{},[69,1505,1506,1508],{},[27,1507,1501],{},"：将依赖标记为外部，不打包进服务端 bundle（适合 Node 原生模块）。",[69,1510,1511,1513],{},[27,1512,1498],{},"：强制将依赖打包（适合需要转译的依赖，如 CSS-in-JS）。",[122,1515,1517],{"className":328,"code":1516,"language":330,"meta":127,"style":127},"export default {\n  ssr: {\n    external: [\"vue\", \"axios\"],\n    noExternal: [\"@my\u002Fui-library\"],\n  },\n};\n",[27,1518,1519,1527,1536,1565,1585,1589],{"__ignoreMap":127},[131,1520,1521,1523,1525],{"class":133,"line":134},[131,1522,342],{"class":153},[131,1524,345],{"class":153},[131,1526,189],{"class":188},[131,1528,1529,1532,1534],{"class":133,"line":170},[131,1530,1531],{"class":352},"  ssr",[131,1533,203],{"class":188},[131,1535,189],{"class":188},[131,1537,1538,1541,1543,1545,1547,1550,1552,1554,1556,1559,1561,1563],{"class":133,"line":177},[131,1539,1540],{"class":352},"    external",[131,1542,203],{"class":188},[131,1544,359],{"class":358},[131,1546,158],{"class":362},[131,1548,1549],{"class":365},"vue",[131,1551,158],{"class":362},[131,1553,370],{"class":188},[131,1555,373],{"class":362},[131,1557,1558],{"class":365},"axios",[131,1560,158],{"class":362},[131,1562,381],{"class":358},[131,1564,384],{"class":188},[131,1566,1567,1570,1572,1574,1576,1579,1581,1583],{"class":133,"line":192},[131,1568,1569],{"class":352},"    noExternal",[131,1571,203],{"class":188},[131,1573,359],{"class":358},[131,1575,158],{"class":362},[131,1577,1578],{"class":365},"@my\u002Fui-library",[131,1580,158],{"class":362},[131,1582,381],{"class":358},[131,1584,384],{"class":188},[131,1586,1587],{"class":133,"line":213},[131,1588,491],{"class":188},[131,1590,1591],{"class":133,"line":227},[131,1592,389],{"class":188},[51,1594,1596,1597,81],{"id":1595},"_4-条件导入importmetaenvssr","4. 条件导入（",[27,1598,104],{},[23,1600,1601],{},"在代码中可以根据环境进行条件导入，避免在客户端引入 Node 模块。",[122,1603,1605],{"className":328,"code":1604,"language":330,"meta":127,"style":127},"if (import.meta.env.SSR) {\n  const fs = await import(\"fs\");\n  \u002F\u002F 服务端逻辑\n} else {\n  \u002F\u002F 客户端逻辑\n}\n",[27,1606,1607,1636,1663,1668,1677,1682],{"__ignoreMap":127},[131,1608,1609,1612,1614,1617,1619,1622,1624,1626,1628,1631,1634],{"class":133,"line":134},[131,1610,1611],{"class":153},"if",[131,1613,596],{"class":358},[131,1615,1616],{"class":153},"import",[131,1618,443],{"class":188},[131,1620,1621],{"class":439},"meta",[131,1623,443],{"class":188},[131,1625,43],{"class":358},[131,1627,443],{"class":188},[131,1629,1630],{"class":439},"SSR",[131,1632,1633],{"class":358},") ",[131,1635,829],{"class":188},[131,1637,1638,1640,1643,1645,1647,1650,1652,1654,1657,1659,1661],{"class":133,"line":170},[131,1639,1396],{"class":180},[131,1641,1642],{"class":439}," fs",[131,1644,1358],{"class":202},[131,1646,1404],{"class":153},[131,1648,1649],{"class":202}," import",[131,1651,450],{"class":352},[131,1653,158],{"class":362},[131,1655,1656],{"class":365},"fs",[131,1658,158],{"class":362},[131,1660,460],{"class":352},[131,1662,210],{"class":188},[131,1664,1665],{"class":133,"line":177},[131,1666,1667],{"class":137},"  \u002F\u002F 服务端逻辑\n",[131,1669,1670,1672,1675],{"class":133,"line":192},[131,1671,1486],{"class":188},[131,1673,1674],{"class":153}," else",[131,1676,189],{"class":188},[131,1678,1679],{"class":133,"line":213},[131,1680,1681],{"class":137},"  \u002F\u002F 客户端逻辑\n",[131,1683,1684],{"class":133,"line":227},[131,1685,230],{"class":188},[46,1687,1689],{"id":1688},"五多页面应用配置","五、多页面应用配置",[51,1691,54,1693,1696],{"id":1692},"_1-buildrollupoptionsinput-配置多个-html-入口",[27,1694,1695],{},"build.rollupOptions.input"," 配置多个 HTML 入口",[122,1698,1700],{"className":328,"code":1699,"language":330,"meta":127,"style":127},"import { resolve } from \"path\";\n\nexport default {\n  build: {\n    rollupOptions: {\n      input: {\n        main: resolve(__dirname, \"index.html\"),\n        about: resolve(__dirname, \"about.html\"),\n        contact: resolve(__dirname, \"contact.html\"),\n      },\n    },\n  },\n};\n",[27,1701,1702,1724,1728,1736,1744,1752,1760,1784,1808,1832,1836,1840,1844],{"__ignoreMap":127},[131,1703,1704,1706,1708,1711,1713,1716,1718,1720,1722],{"class":133,"line":134},[131,1705,1616],{"class":153},[131,1707,664],{"class":188},[131,1709,1710],{"class":358}," resolve",[131,1712,1355],{"class":188},[131,1714,1715],{"class":153}," from",[131,1717,373],{"class":362},[131,1719,600],{"class":365},[131,1721,158],{"class":362},[131,1723,210],{"class":188},[131,1725,1726],{"class":133,"line":170},[131,1727,174],{"emptyLinePlaceholder":173},[131,1729,1730,1732,1734],{"class":133,"line":177},[131,1731,342],{"class":153},[131,1733,345],{"class":153},[131,1735,189],{"class":188},[131,1737,1738,1740,1742],{"class":133,"line":192},[131,1739,1241],{"class":352},[131,1741,203],{"class":188},[131,1743,189],{"class":188},[131,1745,1746,1748,1750],{"class":133,"line":213},[131,1747,1264],{"class":352},[131,1749,203],{"class":188},[131,1751,189],{"class":188},[131,1753,1754,1756,1758],{"class":133,"line":227},[131,1755,1273],{"class":352},[131,1757,203],{"class":188},[131,1759,189],{"class":188},[131,1761,1762,1765,1767,1769,1771,1773,1775,1778,1780,1782],{"class":133,"line":233},[131,1763,1764],{"class":352},"        main",[131,1766,203],{"class":188},[131,1768,1710],{"class":446},[131,1770,1033],{"class":358},[131,1772,370],{"class":188},[131,1774,373],{"class":362},[131,1776,1777],{"class":365},"index.html",[131,1779,158],{"class":362},[131,1781,460],{"class":358},[131,1783,384],{"class":188},[131,1785,1786,1789,1791,1793,1795,1797,1799,1802,1804,1806],{"class":133,"line":238},[131,1787,1788],{"class":352},"        about",[131,1790,203],{"class":188},[131,1792,1710],{"class":446},[131,1794,1033],{"class":358},[131,1796,370],{"class":188},[131,1798,373],{"class":362},[131,1800,1801],{"class":365},"about.html",[131,1803,158],{"class":362},[131,1805,460],{"class":358},[131,1807,384],{"class":188},[131,1809,1810,1813,1815,1817,1819,1821,1823,1826,1828,1830],{"class":133,"line":248},[131,1811,1812],{"class":352},"        contact",[131,1814,203],{"class":188},[131,1816,1710],{"class":446},[131,1818,1033],{"class":358},[131,1820,370],{"class":188},[131,1822,373],{"class":362},[131,1824,1825],{"class":365},"contact.html",[131,1827,158],{"class":362},[131,1829,460],{"class":358},[131,1831,384],{"class":188},[131,1833,1834],{"class":133,"line":262},[131,1835,691],{"class":188},[131,1837,1838],{"class":133,"line":694},[131,1839,697],{"class":188},[131,1841,1842],{"class":133,"line":700},[131,1843,491],{"class":188},[131,1845,1846],{"class":133,"line":705},[131,1847,389],{"class":188},[23,1849,1850],{},"每个 HTML 文件都会作为单独入口，Vite 会分析其引用的脚本和样式，生成对应的 chunk。",[51,1852,1854],{"id":1853},"_2-为每个页面单独生成对应的-chunk","2. 为每个页面单独生成对应的 chunk",[23,1856,1857,1858,1861,1862,1865],{},"默认每个页面会生成独立 JS 和 CSS 文件。可以通过 ",[27,1859,1860],{},"manualChunks"," 进一步细化分割，例如将公共库提取到 ",[27,1863,1864],{},"vendor","，每个页面共享。",[122,1867,1869],{"className":328,"code":1868,"language":330,"meta":127,"style":127},"build: {\n  rollupOptions: {\n    output: {\n      manualChunks(id) {\n        if (id.includes('node_modules')) return 'vendor';\n      },\n    },\n  },\n},\n",[27,1870,1871,1880,1889,1898,1912,1947,1951,1955,1959],{"__ignoreMap":127},[131,1872,1873,1876,1878],{"class":133,"line":134},[131,1874,1875],{"class":184},"build",[131,1877,203],{"class":188},[131,1879,189],{"class":188},[131,1881,1882,1885,1887],{"class":133,"line":170},[131,1883,1884],{"class":184},"  rollupOptions",[131,1886,203],{"class":188},[131,1888,189],{"class":188},[131,1890,1891,1894,1896],{"class":133,"line":177},[131,1892,1893],{"class":184},"    output",[131,1895,203],{"class":188},[131,1897,189],{"class":188},[131,1899,1900,1903,1905,1908,1910],{"class":133,"line":192},[131,1901,1902],{"class":446},"      manualChunks",[131,1904,450],{"class":352},[131,1906,1907],{"class":358},"id",[131,1909,1633],{"class":352},[131,1911,829],{"class":188},[131,1913,1914,1917,1919,1921,1923,1925,1927,1929,1932,1934,1936,1939,1941,1943,1945],{"class":133,"line":213},[131,1915,1916],{"class":153},"        if",[131,1918,596],{"class":352},[131,1920,1907],{"class":358},[131,1922,443],{"class":188},[131,1924,894],{"class":446},[131,1926,450],{"class":352},[131,1928,484],{"class":362},[131,1930,1931],{"class":365},"node_modules",[131,1933,484],{"class":362},[131,1935,906],{"class":352},[131,1937,1938],{"class":153},"return",[131,1940,478],{"class":362},[131,1942,1864],{"class":365},[131,1944,484],{"class":362},[131,1946,210],{"class":188},[131,1948,1949],{"class":133,"line":227},[131,1950,691],{"class":188},[131,1952,1953],{"class":133,"line":233},[131,1954,697],{"class":188},[131,1956,1957],{"class":133,"line":238},[131,1958,491],{"class":188},[131,1960,1961],{"class":133,"line":248},[131,1962,944],{"class":188},[46,1964,1966],{"id":1965},"六库模式","六、库模式",[51,1968,54,1970,1973],{"id":1969},"_1-buildlib-配置打包库",[27,1971,1972],{},"build.lib"," 配置打包库",[122,1975,1977],{"className":328,"code":1976,"language":330,"meta":127,"style":127},"export default {\n  build: {\n    lib: {\n      entry: \"src\u002Findex.js\",\n      name: \"MyLibrary\", \u002F\u002F 全局变量名（用于 UMD）\n      formats: [\"es\", \"umd\"], \u002F\u002F 输出格式\n      fileName: (format) => `my-lib.${format}.js`,\n    },\n    rollupOptions: {\n      external: [\"vue\"], \u002F\u002F 排除依赖，不打包进库\n      output: {\n        globals: { vue: \"Vue\" },\n      },\n    },\n  },\n};\n",[27,1978,1979,1987,1995,2004,2020,2039,2071,2108,2112,2120,2142,2150,2173,2177,2182,2187],{"__ignoreMap":127},[131,1980,1981,1983,1985],{"class":133,"line":134},[131,1982,342],{"class":153},[131,1984,345],{"class":153},[131,1986,189],{"class":188},[131,1988,1989,1991,1993],{"class":133,"line":170},[131,1990,1241],{"class":352},[131,1992,203],{"class":188},[131,1994,189],{"class":188},[131,1996,1997,2000,2002],{"class":133,"line":177},[131,1998,1999],{"class":352},"    lib",[131,2001,203],{"class":188},[131,2003,189],{"class":188},[131,2005,2006,2009,2011,2013,2016,2018],{"class":133,"line":192},[131,2007,2008],{"class":352},"      entry",[131,2010,203],{"class":188},[131,2012,373],{"class":362},[131,2014,2015],{"class":365},"src\u002Findex.js",[131,2017,158],{"class":362},[131,2019,384],{"class":188},[131,2021,2022,2025,2027,2029,2032,2034,2036],{"class":133,"line":213},[131,2023,2024],{"class":352},"      name",[131,2026,203],{"class":188},[131,2028,373],{"class":362},[131,2030,2031],{"class":365},"MyLibrary",[131,2033,158],{"class":362},[131,2035,370],{"class":188},[131,2037,2038],{"class":137}," \u002F\u002F 全局变量名（用于 UMD）\n",[131,2040,2041,2044,2046,2048,2050,2053,2055,2057,2059,2062,2064,2066,2068],{"class":133,"line":227},[131,2042,2043],{"class":352},"      formats",[131,2045,203],{"class":188},[131,2047,359],{"class":358},[131,2049,158],{"class":362},[131,2051,2052],{"class":365},"es",[131,2054,158],{"class":362},[131,2056,370],{"class":188},[131,2058,373],{"class":362},[131,2060,2061],{"class":365},"umd",[131,2063,158],{"class":362},[131,2065,381],{"class":358},[131,2067,370],{"class":188},[131,2069,2070],{"class":137}," \u002F\u002F 输出格式\n",[131,2072,2073,2076,2078,2080,2083,2085,2087,2090,2093,2096,2098,2100,2103,2106],{"class":133,"line":233},[131,2074,2075],{"class":446},"      fileName",[131,2077,203],{"class":188},[131,2079,596],{"class":188},[131,2081,2082],{"class":599},"format",[131,2084,460],{"class":188},[131,2086,605],{"class":180},[131,2088,2089],{"class":362}," `",[131,2091,2092],{"class":365},"my-lib.",[131,2094,2095],{"class":362},"${",[131,2097,2082],{"class":358},[131,2099,1486],{"class":362},[131,2101,2102],{"class":365},".js",[131,2104,2105],{"class":362},"`",[131,2107,384],{"class":188},[131,2109,2110],{"class":133,"line":238},[131,2111,697],{"class":188},[131,2113,2114,2116,2118],{"class":133,"line":248},[131,2115,1264],{"class":352},[131,2117,203],{"class":188},[131,2119,189],{"class":188},[131,2121,2122,2125,2127,2129,2131,2133,2135,2137,2139],{"class":133,"line":262},[131,2123,2124],{"class":352},"      external",[131,2126,203],{"class":188},[131,2128,359],{"class":358},[131,2130,158],{"class":362},[131,2132,1549],{"class":365},[131,2134,158],{"class":362},[131,2136,381],{"class":358},[131,2138,370],{"class":188},[131,2140,2141],{"class":137}," \u002F\u002F 排除依赖，不打包进库\n",[131,2143,2144,2146,2148],{"class":133,"line":694},[131,2145,1289],{"class":352},[131,2147,203],{"class":188},[131,2149,189],{"class":188},[131,2151,2152,2155,2157,2159,2162,2164,2166,2169,2171],{"class":133,"line":700},[131,2153,2154],{"class":352},"        globals",[131,2156,203],{"class":188},[131,2158,664],{"class":188},[131,2160,2161],{"class":352}," vue",[131,2163,203],{"class":188},[131,2165,373],{"class":362},[131,2167,2168],{"class":365},"Vue",[131,2170,158],{"class":362},[131,2172,763],{"class":188},[131,2174,2175],{"class":133,"line":705},[131,2176,691],{"class":188},[131,2178,2180],{"class":133,"line":2179},14,[131,2181,697],{"class":188},[131,2183,2185],{"class":133,"line":2184},15,[131,2186,491],{"class":188},[131,2188,2190],{"class":133,"line":2189},16,[131,2191,389],{"class":188},[51,2193,2195],{"id":2194},"_2-输出-esumd-等格式并处理-external-依赖","2. 输出 es、umd 等格式，并处理 external 依赖",[66,2197,2198,2203,2212],{},[69,2199,2200,2202],{},[27,2201,2052],{}," 格式适合现代打包工具（Tree Shaking 友好）。",[69,2204,2205,2207,2208,2211],{},[27,2206,2061],{}," 格式适合直接 ",[27,2209,2210],{},"\u003Cscript>"," 引入。",[69,2213,2214,2217],{},[27,2215,2216],{},"external"," 告诉 Rollup 不要打包指定依赖，由使用方提供。",[46,2219,2221],{"id":2220},"七预览服务器优化","七、预览服务器优化",[51,2223,2225,2227],{"id":2224},"vite-preview-的生产环境预览",[27,2226,37],{}," 的生产环境预览",[23,2229,2230,2231,2233],{},"构建完成后，使用 ",[27,2232,37],{}," 可以启动一个本地静态服务器，模拟生产环境。常用选项：",[122,2235,2239],{"className":2236,"code":2237,"language":2238,"meta":127,"style":127},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","vite preview --port 5000 --host 0.0.0.0 --cors\n","bash",[27,2240,2241],{"__ignoreMap":127},[131,2242,2243,2245,2248,2252,2255,2258,2261],{"class":133,"line":134},[131,2244,12],{"class":184},[131,2246,2247],{"class":365}," preview",[131,2249,2251],{"class":2250},"stzsN"," --port",[131,2253,2254],{"class":1142}," 5000",[131,2256,2257],{"class":2250}," --host",[131,2259,2260],{"class":1142}," 0.0.0.0",[131,2262,2263],{"class":2250}," --cors\n",[23,2265,2266],{},"也可以在配置文件中预设：",[122,2268,2270],{"className":328,"code":2269,"language":330,"meta":127,"style":127},"export default {\n  preview: {\n    port: 5000,\n    host: \"0.0.0.0\",\n    cors: true,\n    strictPort: true, \u002F\u002F 端口被占用时直接退出\n  },\n};\n",[27,2271,2272,2280,2289,2300,2316,2327,2341,2345],{"__ignoreMap":127},[131,2273,2274,2276,2278],{"class":133,"line":134},[131,2275,342],{"class":153},[131,2277,345],{"class":153},[131,2279,189],{"class":188},[131,2281,2282,2285,2287],{"class":133,"line":170},[131,2283,2284],{"class":352},"  preview",[131,2286,203],{"class":188},[131,2288,189],{"class":188},[131,2290,2291,2294,2296,2298],{"class":133,"line":177},[131,2292,2293],{"class":352},"    port",[131,2295,203],{"class":188},[131,2297,2254],{"class":1142},[131,2299,384],{"class":188},[131,2301,2302,2305,2307,2309,2312,2314],{"class":133,"line":192},[131,2303,2304],{"class":352},"    host",[131,2306,203],{"class":188},[131,2308,373],{"class":362},[131,2310,2311],{"class":365},"0.0.0.0",[131,2313,158],{"class":362},[131,2315,384],{"class":188},[131,2317,2318,2321,2323,2325],{"class":133,"line":213},[131,2319,2320],{"class":352},"    cors",[131,2322,203],{"class":188},[131,2324,584],{"class":583},[131,2326,384],{"class":188},[131,2328,2329,2332,2334,2336,2338],{"class":133,"line":227},[131,2330,2331],{"class":352},"    strictPort",[131,2333,203],{"class":188},[131,2335,584],{"class":583},[131,2337,370],{"class":188},[131,2339,2340],{"class":137}," \u002F\u002F 端口被占用时直接退出\n",[131,2342,2343],{"class":133,"line":233},[131,2344,491],{"class":188},[131,2346,2347],{"class":133,"line":238},[131,2348,389],{"class":188},[23,2350,2351,2352,2355],{},"预览服务器会使用 ",[27,2353,2354],{},"dist"," 目录的内容，可以用于测试构建产物的行为，不支持热更新。",[2357,2358,2359],"h2",{"id":2359},"总结",[2361,2362,2363,2376],"table",{},[2364,2365,2366],"thead",{},[2367,2368,2369,2373],"tr",{},[2370,2371,2372],"th",{},"配置类别",[2370,2374,2375],{},"关键 API \u002F 特性",[2377,2378,2379,2399,2414,2430,2446,2458,2470],"tbody",{},[2367,2380,2381,2387],{},[2382,2383,2384],"td",{},[109,2385,2386],{},"环境变量",[2382,2388,2389,2391,2392,2394,2395,2391,2397],{},[27,2390,57],{},"，",[27,2393,271],{}," 优先级，",[27,2396,315],{},[27,2398,396],{},[2367,2400,2401,2406],{},[2382,2402,2403],{},[109,2404,2405],{},"代理",[2382,2407,2408,2410,2411,2413],{},[27,2409,29],{},"，路径重写、",[27,2412,799],{}," 函数、多规则顺序",[2367,2415,2416,2421],{},[2382,2417,2418],{},[109,2419,2420],{},"路径别名",[2382,2422,2423,2425,2426,1066,2428],{},[27,2424,33],{},"，配合 ",[27,2427,1065],{},[27,2429,1069],{},[2367,2431,2432,2436],{},[2382,2433,2434],{},[109,2435,1630],{},[2382,2437,2438,2391,2441,2391,2443,2445],{},[27,2439,2440],{},"build --ssr",[27,2442,1325],{},[27,2444,1498],{},"，条件导入",[2367,2447,2448,2453],{},[2382,2449,2450],{},[109,2451,2452],{},"多页面",[2382,2454,2455,2457],{},[27,2456,1695],{}," 多入口",[2367,2459,2460,2465],{},[2382,2461,2462],{},[109,2463,2464],{},"库模式",[2382,2466,2467,2469],{},[27,2468,1972],{},"，输出 es\u002Fumd，external + globals",[2367,2471,2472,2477],{},[2382,2473,2474],{},[109,2475,2476],{},"预览服务器",[2382,2478,2479,2391,2481,2484],{},[27,2480,37],{},[27,2482,2483],{},"preview"," 配置项",[23,2486,2487],{},"熟练使用这些高级配置，可以应对绝大多数前端工程的定制需求。",[2357,2489,2490],{"id":2490},"参考文献",[23,2492,2493],{},"以下链接在编写时均可正常访问：",[2361,2495,2496,2506],{},[2364,2497,2498],{},[2367,2499,2500,2503],{},[2370,2501,2502],{},"资料",[2370,2504,2505],{},"说明",[2377,2507,2508,2521,2532],{},[2367,2509,2510,2518],{},[2382,2511,2512],{},[40,2513,2517],{"href":2514,"rel":2515},"https:\u002F\u002Fcn.vite.dev\u002Fconfig\u002F",[2516],"nofollow","配置参考",[2382,2519,2520],{},"官方",[2367,2522,2523,2529],{},[2382,2524,2525],{},[40,2526,1630],{"href":2527,"rel":2528},"https:\u002F\u002Fcn.vite.dev\u002Fguide\u002Fssr",[2516],[2382,2530,2531],{},"服务端渲染",[2367,2533,2534,2540],{},[2382,2535,2536],{},[40,2537,2464],{"href":2538,"rel":2539},"https:\u002F\u002Fcn.vite.dev\u002Fguide\u002Fbuild#library-mode",[2516],[2382,2541,1972],{},[2543,2544,2545],"style",{},"html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sdyVB, html code.shiki .sdyVB{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .stz_E, html code.shiki .stz_E{--shiki-light:#E53935;--shiki-light-font-style:italic;--shiki-default:#22863A;--shiki-default-font-style:inherit;--shiki-dark:#85E89D;--shiki-dark-font-style:inherit}html pre.shiki code .sXwxC, html code.shiki .sXwxC{--shiki-light:#9C3EDA;--shiki-light-font-style:italic;--shiki-default:#6F42C1;--shiki-default-font-style:inherit;--shiki-dark:#B392F0;--shiki-dark-font-style:inherit}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .s2W-s, html code.shiki .s2W-s{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#032F62;--shiki-default-font-style:inherit;--shiki-dark:#9ECBFF;--shiki-dark-font-style:inherit}html pre.shiki code .s9ymX, html code.shiki .s9ymX{--shiki-light:#91B859;--shiki-light-font-style:italic;--shiki-default:#032F62;--shiki-default-font-style:inherit;--shiki-dark:#9ECBFF;--shiki-dark-font-style:inherit}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sucvu, html code.shiki .sucvu{--shiki-light:#E53935;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZUrc, html code.shiki .sZUrc{--shiki-light:#E53935;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sjYin, html code.shiki .sjYin{--shiki-light:#90A4AE;--shiki-light-font-weight:inherit;--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sQRbd, html code.shiki .sQRbd{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .sVXei, html code.shiki .sVXei{--shiki-light:#E53935;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sseR_, html code.shiki .sseR_{--shiki-light:#9C3EDA;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":127,"searchDepth":170,"depth":170,"links":2547},[2548,2549,2550,2551,2552,2553,2554,2555,2556],{"id":48,"depth":177,"text":49},{"id":498,"depth":177,"text":499},{"id":947,"depth":177,"text":948},{"id":1204,"depth":177,"text":1205},{"id":1688,"depth":177,"text":1689},{"id":1965,"depth":177,"text":1966},{"id":2220,"depth":177,"text":2221},{"id":2359,"depth":170,"text":2359},{"id":2490,"depth":170,"text":2490},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fproject\u002FVite\u002Fadvanced","knowledge\u002Fknowledge\u002Fbooklet\u002Fproject\u002FVite\u002Fadvanced.md","md",{"items":2562},[2563,2567,2571,2575,2579,2583],{"path":2564,"title":2565,"description":2566,"category":10,"score":227},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fdeploy","部署实践","Vite 项目的 CI\u002FCD、多环境、CDN、Legacy 与体积预算等工程化要点。环境变量见 env；构建见 生产构建。",{"path":2568,"title":2569,"description":2570,"category":10,"score":227},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fplugin","插件开发","Vite 插件兼容 Rollup 插件，并扩展 config、configureServer、transformIndexHtml 等钩子。原理见 工作原理。",{"path":2572,"title":2573,"description":2574,"category":10,"score":227},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fbuild","生产构建","vite build 使用 Rollup 打包并应用内置优化。开发阶段原理见 工作原理。",{"path":2576,"title":2577,"description":2578,"category":10,"score":227},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fcreate-vite","create-vite","pnpm create vite 实际执行的是 npm 包 create-vite（与 vite 本体不同）。工程化背景见 工程化概览、工作原理。",{"path":2580,"title":2581,"description":2582,"category":10,"score":227},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fworkflow","工作原理","Vite 是面向现代浏览器的前端构建工具：开发阶段利用原生 ES 模块与按需编译；生产构建由 Rollup 完成。对比见 Webpack 与 Vite、工程化概览。",{"path":2584,"title":2585,"description":2586,"category":10,"score":192},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fadvanced","函数进阶","this 绑定、高阶函数、纯函数、记忆化、递归与 IIFE 等是日常开发与面试中的核心主题。前置：语言基础、作用域与闭包。",{"series":2588,"title":12,"items":2589,"index":2601,"prev":2602,"next":2603},"booklet\u002Fproject\u002Fvite",[2590,2591,2593,2595,2597,2599],{"path":7,"title":8,"date":14,"pinned":15},{"path":2572,"title":2573,"date":2592,"pinned":15},"2021-07-24",{"path":2576,"title":2577,"date":2594,"pinned":15},"2021-03-05",{"path":2564,"title":2565,"date":2596,"pinned":15},"2025-10-12",{"path":2568,"title":2569,"date":2598,"pinned":15},"2023-03-27",{"path":2580,"title":2581,"date":2600,"pinned":15},"2020-06-15",0,null,{"path":2572,"title":2573,"date":2592,"pinned":15}]