{"_path":"/blog/vue-pratice/vue3viteelementplus","_draft":false,"_partial":false,"_empty":false,"title":"vue3、vite和ElementPlus專案建置","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3vite和elementplus專案建置"},"children":[{"type":"text","value":"vue3、vite和ElementPlus專案建置"}]},{"type":"element","tag":"h2","props":{"id":"安裝流程"},"children":[{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/guide/#trying-vite-online","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"安裝流程"}]}]},{"type":"element","tag":"code","props":{"code":"# node -v //16.13.0\n# npm -v //8.1.0\n\nnpm create vite@latest\n\ncd ${folder-name}\n\nnpm install\n\nnpm run dev\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# node -v //16.13.0\n# npm -v //8.1.0\n\nnpm create vite@latest\n\ncd ${folder-name}\n\nnpm install\n\nnpm run dev\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"啟動結果\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/oMXZAer.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"viteconfigjs"},"children":[{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite.config.js"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這個設定屬性有插件(plugin)、打包配置(build)、樣式(css)、開發(server)等配置。\n以下範例是在專案中使用了vue3和"},{"type":"element","tag":"a","props":{"href":"https://element-plus.gitee.io/en-US/guide/quickstart.html#on-demand-import","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ElementPlus"}]},{"type":"text","value":"、根據不同mode參數在打包時做base路徑的調整、也在css部份加入sass(這能讓.vue檔lang='scss'被解析)。"}]},{"type":"element","tag":"code","props":{"code":"import { defineConfig, loadEnv } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/vite';\nimport Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\nimport path from 'path';\n\nexport default ({ mode }) => {\n    return defineConfig({\n        base:\n            loadEnv(mode, process.cwd()).VITE_PROJECT_ENV === 'stage'\n                ? `/${loadEnv(mode, process.cwd()).VITE_PROJECT_NAME}/`\n                : '/',\n        resolve: {\n            alias: {\n                '@': path.resolve(__dirname, 'src')\n            }\n        },\n        css: {\n            preprocessorOptions: {\n                scss: {\n                    additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n                }\n            }\n        },\n        plugins: [\n            vue(),\n            AutoImport({\n                resolvers: [ElementPlusResolver()]\n            }),\n            Components({\n                resolvers: [\n                    ElementPlusResolver({\n                        importStyle: 'sass'\n                        // directives: true,\n                        // version: \"1.2.0-beta.1\",\n                    })\n                ]\n            })\n        ],\n        build: {\n            chunkSizeWarningLimit: 1600\n        },\n        server: {\n            host: '0.0.0.0',\n            port: 3000\n        }\n    });\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineConfig, loadEnv } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/vite';\nimport Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\nimport path from 'path';\n\nexport default ({ mode }) => {\n    return defineConfig({\n        base:\n            loadEnv(mode, process.cwd()).VITE_PROJECT_ENV === 'stage'\n                ? `/${loadEnv(mode, process.cwd()).VITE_PROJECT_NAME}/`\n                : '/',\n        resolve: {\n            alias: {\n                '@': path.resolve(__dirname, 'src')\n            }\n        },\n        css: {\n            preprocessorOptions: {\n                scss: {\n                    additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n                }\n            }\n        },\n        plugins: [\n            vue(),\n            AutoImport({\n                resolvers: [ElementPlusResolver()]\n            }),\n            Components({\n                resolvers: [\n                    ElementPlusResolver({\n                        importStyle: 'sass'\n                        // directives: true,\n                        // version: \"1.2.0-beta.1\",\n                    })\n                ]\n            })\n        ],\n        build: {\n            chunkSizeWarningLimit: 1600\n        },\n        server: {\n            host: '0.0.0.0',\n            port: 3000\n        }\n    });\n};\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"對應在package.json的腳本，腳本帶的參數mode可讓vite.config.js使用。"}]},{"type":"element","tag":"code","props":{"code":"{\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"stage\": \"vite --mode stage\",\n    \"build-stage\": \"vite build  --mode stage\",\n    \"build\": \"vite build\"\n  },\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"stage\": \"vite --mode stage\",\n    \"build-stage\": \"vite build  --mode stage\",\n    \"build\": \"vite build\"\n  },\n}\n"}]}]}]},{"type":"element","tag":"warning","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在elementPlus要複寫既有的樣式定義，可以參照"},{"type":"element","tag":"a","props":{"href":"https://element-plus.gitee.io/en-US/guide/namespace.html#set-scss-css-vars","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官網"}]},{"type":"text","value":"寫法複寫，而在vite.config.js中的設定，是讓這個複寫的scss檔能都引入到各個元件。"}]}]},{"type":"element","tag":"code","props":{"code":"/*  elementPlusInit.scss */\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/*  elementPlusInit.scss */\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實際專案\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/wx0n43E.png"},"children":[]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3vite和elementplus專案建置"},"children":[{"type":"text","value":"vue3、vite和ElementPlus專案建置"}]},{"type":"element","tag":"h2","props":{"id":"安裝流程"},"children":[{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/guide/#trying-vite-online","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"安裝流程"}]}]},{"type":"element","tag":"code","props":{"code":"# node -v //16.13.0\n# npm -v //8.1.0\n\nnpm create vite@latest\n\ncd ${folder-name}\n\nnpm install\n\nnpm run dev\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"# node -v //16.13.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"# npm -v //8.1.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"npm create vite@latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c68463"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"folder-name"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"npm install"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"npm run dev"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"啟動結果\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/oMXZAer.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"viteconfigjs"},"children":[{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite.config.js"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這個設定屬性有插件(plugin)、打包配置(build)、樣式(css)、開發(server)等配置。\n以下範例是在專案中使用了vue3和"},{"type":"element","tag":"a","props":{"href":"https://element-plus.gitee.io/en-US/guide/quickstart.html#on-demand-import","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ElementPlus"}]},{"type":"text","value":"、根據不同mode參數在打包時做base路徑的調整、也在css部份加入sass(這能讓.vue檔lang='scss'被解析)。"}]},{"type":"element","tag":"code","props":{"code":"import { defineConfig, loadEnv } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/vite';\nimport Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\nimport path from 'path';\n\nexport default ({ mode }) => {\n    return defineConfig({\n        base:\n            loadEnv(mode, process.cwd()).VITE_PROJECT_ENV === 'stage'\n                ? `/${loadEnv(mode, process.cwd()).VITE_PROJECT_NAME}/`\n                : '/',\n        resolve: {\n            alias: {\n                '@': path.resolve(__dirname, 'src')\n            }\n        },\n        css: {\n            preprocessorOptions: {\n                scss: {\n                    additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n                }\n            }\n        },\n        plugins: [\n            vue(),\n            AutoImport({\n                resolvers: [ElementPlusResolver()]\n            }),\n            Components({\n                resolvers: [\n                    ElementPlusResolver({\n                        importStyle: 'sass'\n                        // directives: true,\n                        // version: \"1.2.0-beta.1\",\n                    })\n                ]\n            })\n        ],\n        build: {\n            chunkSizeWarningLimit: 1600\n        },\n        server: {\n            host: '0.0.0.0',\n            port: 3000\n        }\n    });\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"loadEnv"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" vue "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"@vitejs/plugin-vue"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" AutoImport "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"unplugin-auto-import/vite"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" Components "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"unplugin-vue-components/vite"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"ElementPlusResolver"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"unplugin-vue-components/resolvers"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" path "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-636f65"},"children":[{"type":"text","value":"({"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" mode "}]},{"type":"element","tag":"span","props":{"class":"ct-636f65"},"children":[{"type":"text","value":"})"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-41f8c4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        base"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"loadEnv"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"cwd"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"())"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6bcc3f"},"children":[{"type":"text","value":"VITE_PROJECT_ENV"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"stage"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"loadEnv"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            alias"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8f01ee"},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"__dirname"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        css"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            preprocessorOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                scss"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                    additionalData"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"@use \"@/assets/styles/elementPlusInit.scss\" as *;"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        plugins"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"AutoImport"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                resolvers"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"ElementPlusResolver"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"()]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"Components"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                resolvers"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"ElementPlusResolver"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                        importStyle"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"sass"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"                        "}]},{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"// directives: true,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"                        "}]},{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"// version: \"1.2.0-beta.1\","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aab38a"},"children":[{"type":"text","value":"                ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        ]"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        build"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            chunkSizeWarningLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fc4179"},"children":[{"type":"text","value":"1600"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        server"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            host"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"0.0.0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            port"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fc4179"},"children":[{"type":"text","value":"3000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"對應在package.json的腳本，腳本帶的參數mode可讓vite.config.js使用。"}]},{"type":"element","tag":"code","props":{"code":"{\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"stage\": \"vite --mode stage\",\n    \"build-stage\": \"vite build  --mode stage\",\n    \"build\": \"vite build\"\n  },\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7c246c"},"children":[{"type":"text","value":"scripts"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-435cfd"},"children":[{"type":"text","value":"dev"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-435cfd"},"children":[{"type":"text","value":"stage"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite --mode stage"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-435cfd"},"children":[{"type":"text","value":"build-stage"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite build  --mode stage"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-435cfd"},"children":[{"type":"text","value":"build"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite build"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"warning","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在elementPlus要複寫既有的樣式定義，可以參照"},{"type":"element","tag":"a","props":{"href":"https://element-plus.gitee.io/en-US/guide/namespace.html#set-scss-css-vars","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官網"}]},{"type":"text","value":"寫法複寫，而在vite.config.js中的設定，是讓這個複寫的scss檔能都引入到各個元件。"}]}]},{"type":"element","tag":"code","props":{"code":"/*  elementPlusInit.scss */\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"/*  elementPlusInit.scss */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c95da1"},"children":[{"type":"text","value":"@forward"}]},{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":" 'element-plus/theme-chalk/src/common/var.scss' with ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"    $colors: ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"        'primary': ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"            'base': #3bb071"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"        )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"    )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實際專案\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/wx0n43E.png"},"children":[]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c95da1{color:#89DDFF}.ct-435cfd{color:#FFCB6B}.ct-7c246c{color:#C792EA}.ct-a97117{color:#89DDFF}.ct-fc4179{color:#F78C6C}.ct-aab38a{color:#F07178}.ct-66bed7{color:#89DDFF}.ct-8f01ee{color:#F07178}.ct-6bcc3f{color:#A6ACCD}.ct-a09461{color:#82AAFF}.ct-41f8c4{color:#C792EA}.ct-636f65{color:#89DDFF}.ct-686a50{color:#A6ACCD}.ct-f09d8a{color:#C3E88D}.ct-91451e{color:#89DDFF}.ct-2c823d{color:#F07178}.ct-f6f5cb{color:#89DDFF}.ct-569aa5{color:#89DDFF}.ct-4c429e{color:#A6ACCD}.ct-c68463{color:#82AAFF}.ct-f06c1f{color:#A6ACCD}.ct-820589{color:#676E95}.dark .ct-820589{color:#8B949E}.dark .ct-f06c1f{color:#C9D1D9}.dark .ct-c68463{color:#79C0FF}.dark .ct-4c429e{color:#C9D1D9}.dark .ct-569aa5{color:#C9D1D9}.dark .ct-f6f5cb{color:#FF7B72}.dark .ct-2c823d{color:#C9D1D9}.dark .ct-91451e{color:#A5D6FF}.dark .ct-f09d8a{color:#A5D6FF}.dark .ct-686a50{color:#FFA657}.dark .ct-636f65{color:#FFA657}.dark .ct-41f8c4{color:#FF7B72}.dark .ct-a09461{color:#D2A8FF}.dark .ct-6bcc3f{color:#79C0FF}.dark .ct-8f01ee{color:#A5D6FF}.dark .ct-66bed7{color:#C9D1D9}.dark .ct-aab38a{color:#C9D1D9}.dark .ct-fc4179{color:#79C0FF}.dark .ct-a97117{color:#79C0FF}.dark .ct-7c246c{color:#79C0FF}.dark .ct-435cfd{color:#79C0FF}.dark .ct-c95da1{color:#FF7B72}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"安裝流程","depth":2,"text":"安裝流程"},{"id":"viteconfigjs","depth":2,"text":"vite.config.js"}]}},"_type":"markdown","_id":"content:1.blog:4.Vue Pratice:4.vue3、vite和ElementPlus專案建置.md","_source":"content","_file":"1.blog/4.Vue Pratice/4.vue3、vite和ElementPlus專案建置.md","_extension":"md"}