"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", figure: "figure", h1: "h1", h3: "h3", h4: "h4", h5: "h5", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "一vite构建项目", children: "一、Vite构建项目" }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://cn.vitejs.dev/", children: "Home | Vite 官方中文文档 (vitejs.dev)" }) }), "\n", _jsxs(_components.p, { children: ["Vite 运行 Dev 命令后只做了两件事情，一是启动了一个用于承载资源服务的 service；二是使用 ", _jsx(_components.a, { href: "https://link.zhihu.com/?target=https%3A//mp.weixin.qq.com/s/BCL1Cm64mps4cZe_V26Wtw", children: "esbuild" }), " 预构建 npm 依赖包。之后就一直躺着，直到浏览器以 http 方式发来 ESM 规范的模块请求时，Vite 才开始“", _jsx(_components.strong, { children: "「按需编译」" }), "”被请求的模块。(由于使用了ESM，vite不能使用reuqire，只能使用import和export)"] }), "\n", _jsx(_components.h3, { id: "1使用vite2构建vue2项目", children: "1.使用Vite2构建Vue2项目" }), "\n", _jsx(_components.p, { children: "使用官网模板构建vue项目(vue3)" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "# npm 6.x" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " create" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vite@latest" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " my-vue-app" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --template" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vue" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "# npm 7+, extra double-dash is needed:" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " create" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vite@latest" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " my-vue-app" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --template" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vue" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "# yarn" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "yarn" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " create" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vite" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " my-vue-app" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --template" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vue" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "# pnpm" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "pnpm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " create" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vite" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " my-vue-app" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --template" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vue" })] })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Vite" }), " 默认不提供 ", _jsx(_components.code, { children: "Vue2" }), " 项目的创建方式。这里搭建的时候vue3的项目，可以通过替换vue版本实现vue2,后续插件的版本也需要对应；"] }), "\n", _jsxs(_components.p, { children: ["我们也可以使用 ", _jsx(_components.code, { children: "Vite" }), " 创建一个原生项目，然后再安装 ", _jsx(_components.code, { children: "Vue2" }), " 的生态进行开发，具体参考", _jsx(_components.a, { href: "https://www.jianshu.com/p/fa8fc06b7c6b", children: "Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex） - 简书 (jianshu.com)" })] }), "\n", _jsx(_components.h4, { id: "11初始化项目", children: "1.1初始化项目" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " init" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vite@latest" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "选择" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vanilla" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " 即可" })] })] }) }) }), "\n", _jsx(_components.h4, { id: "12-安装vue依赖", children: "1.2 安装vue依赖" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vue" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vite-plugin-vue2" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --dev" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vue-template-compiler" })] })] }) }) }), "\n", _jsx(_components.h4, { id: "13创建src目录", children: "1.3创建src目录" }), "\n", _jsxs(_components.p, { children: ["在项目根目录下创建 ", _jsx(_components.code, { children: "src" }), " 目录。"] }), "\n", _jsxs(_components.p, { children: ["创建项目的 ", _jsx(_components.code, { children: "main.js" }), " 。"] }), "\n", _jsx(_components.h5, { id: "" }), "\n", _jsxs(_components.h3, { id: "2目录结构差异", children: ["2.", _jsx(_components.strong, { children: "目录结构差异" })] }), "\n", _jsx(_components.p, { children: "搭建完成后可以看到vite的目录结构" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://p.ipic.vip/szkmv9.jpg", alt: "image-20220406183006362" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "index.html" }), " 在项目最外层而不是在 ", _jsx(_components.code, { children: "public" }), " 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 ", _jsx(_components.code, { children: "index.html" }), " 是该 Vite 项目的入口文件。"] }), "\n", _jsxs(_components.p, { children: ["手动引入 ", _jsx(_components.code, { children: "src/main.js 启动入口，设置 " }), "type=module"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "html", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "html", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " type" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "module" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " src" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/src/main.js" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }) }) }) }), "\n", _jsxs(_components.h3, { id: "3基础配置", children: ["3.", _jsx(_components.strong, { children: "基础配置" })] }), "\n", _jsx(_components.h4, { id: "31引入vite依赖", children: "3.1引入vite依赖" }), "\n", _jsxs(_components.p, { children: ["要在 ", _jsx(_components.code, { children: "vite" }), " 里运行 ", _jsx(_components.code, { children: "vue2" }), " 项目，需要安装一个 ", _jsx(_components.code, { children: "vite" }), " 的插件：", _jsx(_components.code, { children: "vite-plugin-vue2" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "sh", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "sh", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vite-plugin-vue2" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --dev" })] }) }) }) }), "\n", _jsx(_components.p, { children: "配置如下" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " createVuePlugin" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vite-plugin-vue2" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " plugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [ " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " createVuePlugin" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " vueTemplateOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "还需要安装vue-template-compiler，注意版本要和vue版本一致" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vue-template-compiler" })] }) }) }) }), "\n", _jsx(_components.h4, { id: "32常用功能配置", children: "3.2常用功能配置" }), "\n", _jsx(_components.p, { children: "3.2.1.导入时省略文件类型后缀" }), "\n", _jsxs(_components.p, { children: ["我们在导入 ", _jsx(_components.code, { children: "vue" }), "、", _jsx(_components.code, { children: "js" }), " 等文件时往往喜欢省略类型后缀，这需要配置 ", _jsx(_components.code, { children: "extensions" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " extensions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " [" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ".vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ".mjs" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ".js" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ".ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ".jsx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ".tsx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ".json" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) })] }) }) }), "\n", _jsx(_components.p, { children: "3.2.2.路径别名配置" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " path " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "path" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " resolve " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " dir" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " path" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(__dirname" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " dir)" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " defineConfig" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " resolve" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " alias" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "@" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " resolve" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "src" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] })] }) }) }), "\n", _jsx(_components.p, { children: "3.2.3.scss配置" }), "\n", _jsx(_components.p, { children: "在vite中需要额外安装sass" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "yarn" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " add" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " sass" })] }) }) }) }), "\n", _jsx(_components.p, { children: "配置如下" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " css" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " preprocessorOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " scss" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // additionalData: '@import \"@/styles/scss/global.scss\";'" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) })] }) }) }), "\n", _jsx(_components.p, { children: "3.2.4.打包压缩" }), "\n", _jsxs(_components.p, { children: ["使用 ", _jsx(_components.code, { children: "vite-plugin-compression" }), " 做 gzip 压缩。"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " compressPlugin " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vite-plugin-compression" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " defineConfig" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " plugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " compressPlugin" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " filter" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " /" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "\\." }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "js" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "|" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "css" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "$" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "/" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "i" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 压缩文件类型" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " deleteOriginFile" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 压缩后删除源文件" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "3.2.5.api 代理" }), "\n", _jsx(_components.p, { children: "proxy的配置和原先一样" }), "\n", _jsx(_components.h3, { id: "4安装router", children: "4.安装Router" }), "\n", _jsx(_components.p, { children: "4.1安装vue-router" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vue-router" })] }) }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " VueRouter " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vue-router" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "Vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "use" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(VueRouter)" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["因为默认的 ", _jsx(_components.code, { children: "router/index.js" }), " 用到了环境变量，根据vite文档，这里需要做修改"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "javascript", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "javascript", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " router " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " VueRouter" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " mode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "history" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " base" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "meta" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "env" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "BASE_URL" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " routes" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["从 ", _jsx(_components.code, { children: "process.env" }), " 改成了 import.meta.env"] }), "\n", _jsx(_components.p, { children: "在main.js中全局注册" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Vue " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " App " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./App.vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " router " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./router/index.js" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Vue" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " router" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " render" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " h" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " h" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(App)" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "$mount" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "#app" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] })] }) }) }), "\n", _jsx(_components.h3, { id: "5安装vuex", children: "5.安装vuex" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " vuex" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " --save" })] }) }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Vue " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Vuex " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vuex" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "Vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "use" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(Vuex)" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Vuex" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "Store" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " state" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {}," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " getters" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " mutations" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " actions: " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "})" }) })] }) }) }), "\n", _jsx(_components.p, { children: "全局注册vuex" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Vue " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vue" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " store " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./store" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Vue" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " store" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " render" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " h" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " h" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(App)" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "$mount" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "#app" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] })] }) }) }), "\n", _jsx(_components.h3, { id: "6运行项目", children: "6.运行项目" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "yarn" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " dev" })] }) }) }) }), "\n", _jsx(_components.h3, { id: "7打包项目", children: "7.打包项目" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "scripts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ": " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "dev" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vite" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "build" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vite build" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "preview" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vite preview" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " //本地调试 --port" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) })] }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "yarn" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " build" })] }) }) }) }), "\n", _jsx(_components.h1, { id: "二vue-cli-转-vite-与-vite特性", children: "二、Vue-cli 转 Vite 与 Vite特性" }), "\n", _jsx(_components.h3, { id: "1-vue-cli-转-vite", children: "1. Vue-cli 转 Vite" }), "\n", _jsx(_components.h4, { id: "11-webpack-to-vite", children: "1.1 webpack-to-vite" }), "\n", _jsxs(_components.p, { children: ["使用 ", _jsx(_components.a, { href: "(https://originjs.org/guide/tools/webpack-to-vite/#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B)", children: "webpack-to-vite" }), " 完成基础转换"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "$" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " @originjs/webpack-to-vite" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " -g" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "$" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " webpack-to-vite" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "project" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " pat" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "h" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] })] }) }) }), "\n", _jsx(_components.h4, { id: "12--indexhtml", children: "1.2 index.html" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "html", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "head" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "link" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " rel" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "icon" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " href" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "<%= BASE_URL %>favicon.ico" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "body" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "app" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "\t\t" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "head" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "link" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " rel" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "icon" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " href" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/favicon.ico" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "body" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "app" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " type" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "module" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " src" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/src/main.js" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "vite 与 webpack 对比 (1.2)" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.html" }), " 中的 URL 将被自动转换，因此不再需要 ", _jsx(_components.code, { children: "BASE_URL" }), " 占位符"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "webpack" }), "中的入口文件被放在 ", _jsx(_components.code, { children: "index.html" }), " 中解析"] }), "\n"] }), "\n", _jsx(_components.h4, { id: "13-viteconfigjs", children: "1.3 vite.config.js" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// vue-cli" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " TerserPlugin " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " require" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "terser-webpack-plugin" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " CompressionPlugin " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " require" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "compression-webpack-plugin" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " path " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " require" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "path" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " resolve" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "dir" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "\treturn" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " path" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "join" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "__dirname" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " dir" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "module.exports" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\tpublicPath" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\tdevServer" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\t\thost" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "0.0.0.0" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\t\tport" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 9096" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\t\topen" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t}," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\tcss" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\t\tloaderOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\t\t\tsass" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\t\t\t\tdata" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " `" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@import \"@/styles/index.scss\";" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "`" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t}," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: "\tchainWebpack" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " config" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "\t\tconfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "alias" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "set" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " resolve" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "src" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "))" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "\t\tconfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "module" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "rule" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "workder" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "test" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "/" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "\\." }), _jsx(_components.span, { style: { color: "#91B859" }, children: "worker" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "\\." }), _jsx(_components.span, { style: { color: "#91B859" }, children: "js" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "$" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "/" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "use" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "worker-loader" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "loader" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "worker-loader" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "options" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\t\t\t\tinline" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t}" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "end" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "\t\tconfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "module" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "rule" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "images" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "test" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "/" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "\\." }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "png" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "|" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "jpe" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "g" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "|" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "gif" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "|" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "webp" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "|" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "svg" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "\\?" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "." }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "*)?" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "$" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "/" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "exclude" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "add" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "src/icon/svg" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "))" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t\t\t." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "end" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\t}," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\tconfigureWebpack" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \toptimization" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " minimizer" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " TerserPlugin" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " terserOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " warnings" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " false" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " compress" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " drop_console" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " false" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " drop_debugger" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " parallel" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " sourceMap" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " plugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " process" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "env" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "NODE_ENV " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "===" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "production" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ?" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " CompressionPlugin" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " filename" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "[path].gz[query]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " algorithm" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "gzip" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " test" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " new" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " RegExp" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "\\\\" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ".(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " +" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "js" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "css" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "join" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "|" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "+" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: ")$" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " )" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " threshold" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 10240" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " minRatio" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 0.8" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " :" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " []" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// vite" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " defineConfig" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " loadEnv" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vite" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " path " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "path" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " createVuePlugin" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vite-plugin-vue2" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ViteRequireContext " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@originjs/vite-plugin-require-context" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " envCompatible " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "vite-plugin-env-compatible" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " viteCommonjs" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@originjs/vite-plugin-commonjs" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ({" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " mode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " })" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "=>" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "defineConfig" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " base" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " loadEnv" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(mode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " process" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "cwd" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "())" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "DEV " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "/" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " :" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " server" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \tstrictPort" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " false" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \tport" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 9096" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \thost" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "0.0.0.0" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \topen" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \t}," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " css" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \tpreprocessorOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \t \tsass" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\t \tadditionalData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@import \"@/styles/index.scss\";" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \t\t}," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \t \tscss" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \t\tadditionalData" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@import \"@/styles/index.scss\";" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \t\texclude" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "node_modules" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \t\tjavascriptEnabled" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \t\tcharset" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " false" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \t\t}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \t}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \t}," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " resolve" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " alias" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " find" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " /" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "^" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "~" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "/" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " replacement" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " find" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " replacement" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " path" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "resolve" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(__dirname" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "src" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " plugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " createVuePlugin" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " jsx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " vueTemplateOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " compilerOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \twhitespace" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "condense" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " ViteRequireContext" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " viteCommonjs" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " envCompatible" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " viteCompression" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "()" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " build" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " minify" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "terser" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " terserOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " compress" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " keep_infinity" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " drop_console" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " drop_debugger" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " true" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " chunkSizeWarningLimit" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 2000" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "vite 与 webpack 对比 (1.3)" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["公共基础路径、开发服务器、别名、", _jsx(_components.code, { children: "gzip" }), "、", _jsx(_components.code, { children: "terser" }), "配置不同"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Vite" }), " 提供了对 ", _jsx(_components.code, { children: ".scss" }), ", ", _jsx(_components.code, { children: ".sass" }), ", ", _jsx(_components.code, { children: ".less" }), ", ", _jsx(_components.code, { children: ".styl" }), " 和 ", _jsx(_components.code, { children: ".stylus" }), " 文件的内置支持，不必像", _jsx(_components.code, { children: "wepack" }), "一样为它们安装特定的插件，但必须安装相应的预处理器依赖，例如", _jsx(_components.code, { children: "sass" }), ",", _jsx(_components.code, { children: "less" }), ",", _jsx(_components.code, { children: "stylus" })] }), "\n", _jsxs(_components.li, { children: ["静态资源的处理不同，例如图片与", _jsx(_components.code, { children: "web workder" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Vite" }), "对", _jsx(_components.code, { children: "jsx" }), "语法显式声明"] }), "\n"] }), "\n", _jsx(_components.h4, { id: "14-jsx", children: "1.4 JSX" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["需要将所有使用到", _jsx(_components.code, { children: "jsx" }), "语法的js文件后缀名改为", _jsx(_components.code, { children: ".jsx" }), "，在使用到", _jsx(_components.code, { children: "jsx" }), "语法的vue文件中将脚本加上 ", _jsx(_components.code, { children: "lang=\"jsx\"" }), "标识"] }), "\n", _jsxs(_components.li, { children: ["将", _jsx(_components.code, { children: "jsx" }), "语法转换为", _jsx(_components.code, { children: "render" }), "函数"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "vue", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "<" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "script" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " lang" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "jsx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " export default {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " render(){" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " return

JSX Render

" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] })] }) }) }), "\n", _jsx(_components.h4, { id: "15-css", children: "1.5 CSS" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["vite 不支持", _jsx(_components.code, { children: " :export" }), " 语法，可以通过以下方式替代"] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " targetStyle " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./target.module.scss" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }) }) }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "/deep/" }), " 不再被支持，用", _jsx(_components.code, { children: "::v-deep" }), "替代"] }), "\n"] }), "\n", _jsx(_components.h4, { id: "16-静态资源", children: "1.6 静态资源" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: "Web worker" }), "\n", _jsxs(_components.p, { children: ["脚本可以通过 ", _jsx(_components.code, { children: "?worker" }), " 或 ", _jsx(_components.code, { children: "?sharedworker" }), " 后缀导入为 web worker"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Worker " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "path/target.worker.js?worker" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }) }) }) }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: "图片" }), "\n", _jsxs(_components.p, { children: ["图片可以被当作URL引入，或者直接在", _jsx(_components.code, { children: "" }), "标签中引入图片路径"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " imgUrl " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "./img.png" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "// const imgUrl = new URL('./img.png', import.meta.url).href;" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "document" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "hero-img" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "src " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " imgUrl" })] })] }) }) }), "\n"] }), "\n"] }), "\n", _jsx(_components.h4, { id: "17-其他", children: "1.7 其他" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Autoprefixer" }) }), "\n", _jsx(_components.p, { children: "（一款PostCSS 插件，用于解析 CSS 并使用 Can I Use 中的值浏览器前缀添加到 CSS 规则中）" }), "\n", _jsxs(_components.p, { children: ["在vue-cli项目中，", _jsx(_components.code, { children: "Autoprefixer" }), "作为", _jsx(_components.code, { children: "@vue/cli-service" }), "的依赖被引入，在vite项目中需要在package.json中声明这一依赖。"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "pdfmaker 与 CommonJS" }) }), "\n", _jsx(_components.p, { children: "由于 Vite 只支持 ES Module 包，对于 CommonJS 或 UMD 包必须经过转换才可使用，而 Vite 的智能导入分析可能存在缺漏，因此需要手动配置让依赖被预构建处理。" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " defineConfig" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " optimizeDeps" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " \tinclude" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "pica" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " '" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "tinycolor2" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "'" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ";" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["同时，项目中可能出现单独引入某一CommonJS依赖下的某个文件，在这种情况下", _jsx(_components.code, { children: "optimizeDeps" }), "也不起作用，需要引入", _jsx(_components.code, { children: "@rollup/plugin-commonjs" }), "手动处理"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " defineConfig" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: "\tplugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: "\t\tcommonjs" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " dynamicRequireTargets" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "node_modules/pdfmake/build/pdfmake.js" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "node_modules/pdfmake/build/vfs_fonts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: "\t]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " optimizeDeps" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " include" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "pdfmake/build/pdfmake" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "pdfmake/build/vfs_fonts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] })] }) }) }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: ".env" }) }), "\n", _jsxs(_components.p, { children: ["Vite 在一个特殊的 ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "import.meta.env" }) }), " 对象上暴露环境变量，常用变量有：", _jsx(_components.code, { children: "import.meta.env.MODE``import.meta.env.BASE_URL" }), ",", _jsx(_components.code, { children: "import.meta.env.PROD" }), ",", _jsx(_components.code, { children: "import.meta.env.DEV" }), "。"] }), "\n", _jsxs(_components.p, { children: ["Vite 通过.env文件加载的环境变量也会通过 ", _jsx(_components.code, { children: "import.meta.env" }), " 暴露给客户端源码。"] }), "\n", _jsxs(_components.p, { children: ["为了防止意外地将一些环境变量泄漏到客户端，只有以 ", _jsx(_components.code, { children: "VITE_" }), " 为前缀的变量才会暴露给经过 vite 处理的代码。"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "//" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " .env.permission" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "VITE_APP_PERMISSION" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " true" })] })] }) }) }), "\n"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "2-vite特性", children: "2. Vite特性" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://p.ipic.vip/oujajj.png", alt: "webpack-dev-server.png" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "webpack" }), "：先打包后启动"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://p.ipic.vip/qsn7so.png", alt: "esm-dev-server.png" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "vite" }), "：先启动再按需编译资源"] }), "\n", _jsx(_components.h4, { id: "21-预构建", children: "2.1 预构建" }), "\n", _jsxs(_components.p, { children: ["用", _jsx(_components.code, { children: "Esbuild" }), "整理不会发生变化的 node_modules 依赖，进行预构建，减少网络请求次数。"] }), "\n", _jsx(_components.h5, { id: "211-预构建流程", children: "2.1.1 预构建流程" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "查找依赖" }), "：如果是首次启动本地服务，那么", _jsx(_components.code, { children: "vite" }), "会自动抓取源代码，从代码中找到需要预构建的依赖，即：以", _jsx(_components.code, { children: "index.html" }), "作为查找入口（", _jsx(_components.code, { children: "entryPoints" }), "），将所有的来自", _jsx(_components.code, { children: "node_modules" }), "以及在配置文件的", _jsx(_components.code, { children: "optimizeDeps.include" }), "选项中指定的模块找出来；"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "构建找到的依赖" }), "：打包需要预构建的依赖列表；"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "创建或更新缓存文件" }), "：", _jsx(_components.code, { children: "vite" }), "在启动时为提升速度，会检查缓存是否有效，有效的话就可以跳过预构建环节，缓存是否有效的判定是对比缓存中的", _jsx(_components.code, { children: "hash" }), "值与当前的", _jsx(_components.code, { children: "hash" }), "值是否相同。由于", _jsx(_components.code, { children: "hash" }), "的生成算法是基于", _jsx(_components.code, { children: "vite" }), "配置文件和项目依赖的，所以配置文件和依赖的的变化都会导致", _jsx(_components.code, { children: "hash" }), "发生变化，从而重新进行预构建。"] }), "\n"] }), "\n", _jsx(_components.h5, { id: "212-预构建原因", children: "2.1.2 预构建原因" }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "CommonJS 和 UMD 兼容性" }), "：开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将作为 CommonJS 或 UMD 发布的依赖项转换为 ESM。当转换 CommonJS 依赖时，Vite 会执行智能导入分析，这样即使导出是动态分配的（如 React），按名导入也会符合预期效果："] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "性能：" }), " Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能。"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["一些包将它们的 ES 模块构建作为许多单独的文件相互导入。例如，", _jsxs(_components.a, { href: "https://unpkg.com/browse/lodash-es/", children: [_jsx(_components.code, { children: "lodash-es" }), " 有超过 600 个内置模块"] }), "！当我们执行 ", _jsx(_components.code, { children: "import { debounce } from 'lodash-es'" }), " 时，浏览器同时发出 600 多个 HTTP 请求！尽管服务器在处理这些请求时没有问题，但大量的请求会在浏览器端造成网络拥塞，导致页面的加载速度相当慢。"] }), "\n", _jsxs(_components.p, { children: ["通过预构建 ", _jsx(_components.code, { children: "lodash-es" }), " 成为一个模块，我们就只需要一个 HTTP 请求了！"] }), "\n"] }), "\n", _jsx(_components.h4, { id: "22-缓存", children: "2.2 缓存" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "缓存文件" }), "：Vite 会将预构建的依赖缓存到 ", _jsx(_components.code, { children: "node_modules/.vite" }), "。", _jsx(_components.code, { children: " package.json" }), "中的依赖列表、", _jsx(_components.code, { children: "lockfile" }), "、", _jsx(_components.code, { children: "vite.config.js" }), "的变化、", _jsx(_components.code, { children: "node_modules/.vite" }), "被删除、或者用", _jsx(_components.code, { children: "--force" }), "启动开发服务器，都会导致重新运行预构建。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "浏览器缓存" }), "：解析后的依赖请求会以 HTTP 头 ", _jsx(_components.code, { children: "max-age=31536000,immutable" }), " 强缓存，以提高在开发时的页面重载性能。一旦被缓存，这些请求将永远不会再到达开发服务器。"] }), "\n"] }), "\n", _jsx(_components.h5, { id: "23-热更新", children: "2.3 热更新" }), "\n", _jsx(_components.h5, { id: "231-开发模式下的运行流程", children: "2.3.1 开发模式下的运行流程" }), "\n", _jsx(_components.p, { children: "Vite提供了一个开发服务器，然后结合原生的ESM，当代码中出现import的时候，发送一个资源请求，Vite开发服务器拦截请求，根据不同文件类型，在服务端完成模块的改写（比如单文件的解析编译等）和请求处理，实现真正的按需编译，然后返回给浏览器。请求的资源在服务器端按需编译返回，完全跳过了打包这个概念，不需要生成一个大的bundle。服务器随起随用，所以开发环境下的初次启动是非常快的。而且热更新的速度不会随着模块增多而变慢，因为代码改动后，并不会有bundle的过程。" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "资源类型" }), _jsx(_components.th, { children: "服务端操作" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "CSS LESS SCSS" }), _jsx(_components.td, { children: "CSS 预处理,打包为ESModule动态插入style标签" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "jsx ts tsx vue" }), _jsx(_components.td, { children: "JS编译" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "json" }), _jsx(_components.td, { children: "打包为ESModule" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "静态资源" }), _jsx(_components.td, { children: "打包为ESModule,输出本地路径" })] })] })] }), "\n", _jsx(_components.h5, { id: "232-热更新原理", children: "2.3.2 热更新原理" }), "\n", _jsxs(_components.p, { children: ["Vite 通过 ", _jsx(_components.code, { children: "WebSocket" }), " 来实现热更新通信。"] }), "\n", _jsx(_components.p, { children: "Vite的客户端监听来自服务端的 HMR 消息推送完成对应的更新操作，消息包含：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "connected" }), ": WebSocket 连接成功"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "vue-reload" }), ": Vue 组件重新加载（当你修改了 script 里的内容时）"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "vue-rerender" }), ": Vue 组件重新渲染（当你修改了 template 里的内容时）"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "style-update" }), ": 样式更新"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "style-remove" }), ": 样式移除"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "js-update" }), ": js 文件更新"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "full-reload" }), ": fallback 机制，网页重刷新"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Vite在服务端监听文件变更，根据不同文件类型来做不同的处理。例如：对于 ", _jsx(_components.code, { children: "Vue" }), " 文件的热更新而言，主要是重新编译 ", _jsx(_components.code, { children: "Vue" }), " 文件，检测 ", _jsx(_components.code, { children: "template" }), " 、", _jsx(_components.code, { children: "script" }), " 、", _jsx(_components.code, { children: "style" }), " 的改动，如果有改动就通过 WS 服务端发起对应的热更新请求；对于热更新 ", _jsx(_components.code, { children: "js" }), " 文件而言，会递归地查找引用这个文件的 ", _jsx(_components.code, { children: "importer" }), "，如果找不到就发送", _jsx(_components.code, { children: "full-reload" }), "。"] }), "\n", _jsx(_components.h4, { id: "24-与webpack的对比", children: "2.4 与Webpack的对比" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, {}), _jsx(_components.th, { children: "Bundle（Webpack）" }), _jsx(_components.th, { children: "Bundleless(Vite/Snowpack)" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "启动时间" }), _jsx(_components.td, { children: "长，完成打包项目" }), _jsx(_components.td, { children: "短，只启动Server 按需加载" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "构建时间" }), _jsx(_components.td, { children: "随项目体积线性增长" }), _jsx(_components.td, { children: "构建时间复杂度O(1)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "加载性能" }), _jsx(_components.td, { children: "打包后加载对应Bundle" }), _jsx(_components.td, { children: "请求映射至本地文件" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "缓存能力" }), _jsx(_components.td, { children: "缓存利用率一般，受split方式影响" }), _jsx(_components.td, { children: "缓存利用率近乎完美" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "文件更新" }), _jsx(_components.td, { children: "重新打包" }), _jsx(_components.td, { children: "重新请求单个文件" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "调试体验" }), _jsx(_components.td, { children: "通常需要SourceMap进行调试" }), _jsx(_components.td, { children: "不强依赖SourceMap,可单文件调试" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "生态" }), _jsx(_components.td, { children: "非常完善" }), _jsx(_components.td, { children: "目前先对不成熟，但是发展很快" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "底层" }), _jsx(_components.td, { children: "Node.js" }), _jsx(_components.td, { children: "Esbuild(Go)" })] })] })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Vite实践笔记

目录