diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js
index 8b464115..209e5988 100644
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@@ -24,7 +24,7 @@ export default (api) => {
 
     api.addRuntimePluginKey(() => 'layout');
 
-    const absFilePath = join(namespace, 'index.js');
+    const absFilePath = join(namespace, 'index.jsx');
 
     const absRuntimeFilePath = join(namespace, 'runtime.js');
 
diff --git a/packages/fes-plugin-layout/src/runtime/runtime.js b/packages/fes-plugin-layout/src/runtime/runtime.js
index c676984f..eaeb72f0 100644
--- a/packages/fes-plugin-layout/src/runtime/runtime.js
+++ b/packages/fes-plugin-layout/src/runtime/runtime.js
@@ -1,13 +1,11 @@
 import { plugin, ApplyPluginsType } from '@@/core/coreExports';
 // eslint-disable-next-line import/extensions
 import { access as accessApi } from '../plugin-access/core';
-import Exception404 from './views/404';
-import Exception403 from './views/403';
+import Exception404 from './views/404.vue';
+import Exception403 from './views/403.vue';
 
 if (!accessApi) {
-    throw new Error(
-        '[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！'
-    );
+    throw new Error('[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！');
 }
 
 const handle = (type, router) => {
@@ -16,7 +14,7 @@ const handle = (type, router) => {
     const name = `Exception${type}`;
     const components = {
         404: Exception404,
-        403: Exception403
+        403: Exception403,
     };
     if (!accesssIds.includes(path)) {
         accessApi.setAccess(accesssIds.concat([path]));
@@ -26,18 +24,19 @@ const handle = (type, router) => {
     }
 };
 
-export const access = memo => ({
-    unAccessHandler({
-        router, to, from, next
-    }) {
+export const access = (memo) => ({
+    unAccessHandler({ router, to, from, next }) {
         const runtimeConfig = plugin.applyPlugins({
             key: 'layout',
             type: ApplyPluginsType.modify,
-            initialValue: {}
+            initialValue: {},
         });
         if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {
             return runtimeConfig.unAccessHandler({
-                router, to, from, next
+                router,
+                to,
+                from,
+                next,
             });
         }
         if (to.path === '/404') {
@@ -47,17 +46,18 @@ export const access = memo => ({
         handle(403, router);
         next('/403');
     },
-    noFoundHandler({
-        router, to, from, next
-    }) {
+    noFoundHandler({ router, to, from, next }) {
         const runtimeConfig = plugin.applyPlugins({
             key: 'layout',
             type: ApplyPluginsType.modify,
-            initialValue: {}
+            initialValue: {},
         });
         if (runtimeConfig.noFoundHandler && typeof runtimeConfig.noFoundHandler === 'function') {
             return runtimeConfig.noFoundHandler({
-                router, to, from, next
+                router,
+                to,
+                from,
+                next,
             });
         }
         if (to.path === '/403') {
@@ -67,5 +67,5 @@ export const access = memo => ({
         handle(404, router);
         next('/404');
     },
-    ...memo
+    ...memo,
 });
diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index 83065240..a6f24beb 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@@ -12,26 +12,12 @@
             >
                 <div v-if="routeLayout.logo" class="layout-logo">
                     <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{title}}</div>
+                    <div class="logo-name">{{ title }}</div>
                 </div>
-                <Menu
-                    class="layout-menu"
-                    :menus="menus"
-                    :collapsed="collapsedRef"
-                    mode="vertical"
-                    :inverted="theme === 'dark'"
-                />
+                <Menu class="layout-menu" :menus="menus" :collapsed="collapsedRef" mode="vertical" :inverted="theme === 'dark'" />
             </f-aside>
-            <f-layout
-                :fixed="fixedSideBar"
-                :style="sideStyleRef"
-            >
-                <f-header
-                    v-if="routeLayout.header"
-                    ref="headerRef"
-                    class="layout-header"
-                    :fixed="currentFixedHeaderRef"
-                >
+            <f-layout :fixed="fixedSideBar" :style="sideStyleRef">
+                <f-header v-if="routeLayout.header" ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
                     <div class="layout-header-custom">
                         <slot name="customHeader"></slot>
                     </div>
@@ -39,38 +25,23 @@
                         <slot name="locale"></slot>
                     </template>
                 </f-header>
-                <f-layout
-                    :embedded="!multiTabs"
-                    :fixed="currentFixedHeaderRef"
-                    :style="headerStyleRef"
-                >
+                <f-layout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
                     <f-main class="layout-main">
                         <MultiTabProvider :multiTabs="multiTabs" />
                     </f-main>
                     <f-footer v-if="footer" class="layout-footer">
-                        {{footer}}
+                        {{ footer }}
                     </f-footer>
                 </f-layout>
             </f-layout>
         </template>
         <template v-if="navigation === 'top'">
-            <f-header
-                v-if="routeLayout.header"
-                ref="headerRef"
-                class="layout-header"
-                :inverted="theme === 'dark'"
-                :fixed="currentFixedHeaderRef"
-            >
+            <f-header v-if="routeLayout.header" ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
                 <div v-if="routeLayout.logo" class="layout-logo">
                     <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{title}}</div>
+                    <div class="logo-name">{{ title }}</div>
                 </div>
-                <Menu
-                    class="layout-menu"
-                    :menus="menus"
-                    mode="horizontal"
-                    :inverted="theme === 'dark'"
-                />
+                <Menu class="layout-menu" :menus="menus" mode="horizontal" :inverted="theme === 'dark'" />
                 <div class="layout-header-custom">
                     <slot name="customHeader"></slot>
                 </div>
@@ -78,30 +49,20 @@
                     <slot name="locale"></slot>
                 </template>
             </f-header>
-            <f-layout
-                :embedded="!multiTabs"
-                :fixed="currentFixedHeaderRef"
-                :style="headerStyleRef"
-            >
+            <f-layout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
                 <f-main class="layout-main">
                     <MultiTabProvider :multiTabs="multiTabs" />
                 </f-main>
                 <f-footer v-if="footer" class="layout-footer">
-                    {{footer}}
+                    {{ footer }}
                 </f-footer>
             </f-layout>
         </template>
         <template v-if="navigation === 'mixin'">
-            <f-header
-                v-if="routeLayout.header"
-                ref="headerRef"
-                class="layout-header"
-                :fixed="currentFixedHeaderRef"
-                :inverted="theme === 'dark'"
-            >
+            <f-header v-if="routeLayout.header" ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
                 <div v-if="routeLayout.logo" class="layout-logo">
                     <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{title}}</div>
+                    <div class="logo-name">{{ title }}</div>
                 </div>
                 <div class="layout-header-custom">
                     <slot name="customHeader"></slot>
@@ -119,23 +80,14 @@
                     collapsible
                     class="layout-aside"
                 >
-                    <Menu
-                        class="layout-menu"
-                        :menus="menus"
-                        :collapsed="collapsedRef"
-                        mode="vertical"
-                    />
+                    <Menu class="layout-menu" :menus="menus" :collapsed="collapsedRef" mode="vertical" />
                 </f-aside>
-                <f-layout
-                    :embedded="!multiTabs"
-                    :fixed="fixedSideBar"
-                    :style="sideStyleRef"
-                >
+                <f-layout :embedded="!multiTabs" :fixed="fixedSideBar" :style="sideStyleRef">
                     <f-main class="layout-main">
                         <MultiTabProvider :multiTabs="multiTabs" />
                     </f-main>
                     <f-footer v-if="footer" class="layout-footer">
-                        {{footer}}
+                        {{ footer }}
                     </f-footer>
                 </f-layout>
             </f-layout>
@@ -147,11 +99,9 @@
 <script>
 import { ref, computed, onMounted } from 'vue';
 import { useRoute, plugin, ApplyPluginsType } from '@@/core/coreExports';
-import {
-    FLayout, FAside, FMain, FFooter, FHeader
-} from '@fesjs/fes-design';
-import Menu from './Menu';
-import MultiTabProvider from './MultiTabProvider';
+import { FLayout, FAside, FMain, FFooter, FHeader } from '@fesjs/fes-design';
+import Menu from './Menu.vue';
+import MultiTabProvider from './MultiTabProvider.vue';
 import defaultLogo from '../assets/logo.png';
 
 export default {
@@ -162,52 +112,52 @@ export default {
         FFooter,
         FHeader,
         Menu,
-        MultiTabProvider
+        MultiTabProvider,
     },
     props: {
         menus: {
             type: Array,
             default() {
                 return [];
-            }
+            },
         },
         title: {
             type: String,
-            default: ''
+            default: '',
         },
         locale: {
             type: Boolean,
-            default: false
+            default: false,
         },
         logo: {
             type: String,
-            default: defaultLogo
+            default: defaultLogo,
         },
         theme: {
             type: String,
-            default: 'dark' // light、dark
+            default: 'dark', // light、dark
         },
         navigation: {
             type: String,
-            default: 'side' // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
+            default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
         },
         fixedHeader: {
             type: Boolean,
-            default: false
+            default: false,
         },
         fixedSideBar: {
             type: Boolean,
-            default: true
+            default: true,
         },
         multiTabs: {
             type: Boolean,
-            default: false
+            default: false,
         },
         sideWidth: {
             type: Number,
-            default: 200
+            default: 200,
         },
-        footer: String
+        footer: String,
     },
     setup(props) {
         const headerRef = ref();
@@ -227,8 +177,8 @@ export default {
             initialValue: {
                 sidebar: true,
                 header: true,
-                logo: true
-            }
+                logo: true,
+            },
         });
         const routeLayout = computed(() => {
             let config;
@@ -239,9 +189,7 @@ export default {
             } else if (typeof metaLayoutConfig === 'object') {
                 config = { ...runtimeConfig, ...metaLayoutConfig };
             } else {
-                console.error(
-                    '[plugin-layout]: meta layout must be object or boolean！'
-                );
+                console.error('[plugin-layout]: meta layout must be object or boolean！');
             }
             // query 中 layout 默认为 false
             const routeQueryLayoutConfig = route.query.layout && JSON.parse(route.query.layout);
@@ -250,21 +198,19 @@ export default {
             } else if (typeof routeQueryLayoutConfig === 'object') {
                 config = { ...config, ...routeQueryLayoutConfig };
             } else if (routeQueryLayoutConfig !== undefined) {
-                console.error(
-                    '[plugin-layout]: query layout must be object or boolean！'
-                );
+                console.error('[plugin-layout]: query layout must be object or boolean！');
             }
             return config;
         });
-        const currentFixedHeaderRef = computed(
-            () => props.fixedHeader || props.navigation === 'mixin'
-        );
+        const currentFixedHeaderRef = computed(() => props.fixedHeader || props.navigation === 'mixin');
         const headerStyleRef = computed(() => (currentFixedHeaderRef.value ? { top: `${headerHeightRef.value}px` } : null));
-        const sideStyleRef = computed(() => (props.fixedSideBar
-            ? {
-                left: collapsedRef.value ? '48px' : `${props.sideWidth}px`
-            }
-            : null));
+        const sideStyleRef = computed(() =>
+            props.fixedSideBar
+                ? {
+                    left: collapsedRef.value ? '48px' : `${props.sideWidth}px`,
+                }
+                : null,
+        );
         return {
             headerRef,
             headerHeightRef,
@@ -273,9 +219,9 @@ export default {
             collapsedRef,
             currentFixedHeaderRef,
             headerStyleRef,
-            sideStyleRef
+            sideStyleRef,
         };
-    }
+    },
 };
 </script>
 <style lang="less" scoped>
diff --git a/packages/fes-plugin-layout/src/runtime/views/Menu.vue b/packages/fes-plugin-layout/src/runtime/views/Menu.vue
index d01648f6..c05fe1d0 100644
--- a/packages/fes-plugin-layout/src/runtime/views/Menu.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/Menu.vue
@@ -1,61 +1,57 @@
 <template>
-    <f-menu
-        :modelValue="activePath"
-        :inverted="inverted"
-        :mode="mode"
-        :options="fixedMenus"
-        @select="onMenuClick"
-    ></f-menu>
+    <f-menu :modelValue="activePath" :inverted="inverted" :mode="mode" :options="fixedMenus" @select="onMenuClick"></f-menu>
 </template>
 
 <script>
 import { computed, h } from 'vue';
 import { FMenu } from '@fesjs/fes-design';
 import { useRoute, useRouter } from '@@/core/coreExports';
-import MenuIcon from './MenuIcon';
+import MenuIcon from './MenuIcon.vue';
 import { transform as transformByAccess } from '../helpers/pluginAccess';
 import { transform as transformByLocale } from '../helpers/pluginLocale';
 import { flatNodes } from '../helpers/utils';
 
 export default {
     components: {
-        FMenu
+        FMenu,
     },
     props: {
         menus: {
             type: Array,
             default() {
                 return [];
-            }
+            },
         },
         mode: {
             type: String,
-            default: 'vertical'
+            default: 'vertical',
         },
         inverted: {
             type: Boolean,
-            default: false
-        }
+            default: false,
+        },
     },
     setup(props) {
         const route = useRoute();
         const router = useRouter();
-        const transform = menus => menus.map((menu) => {
-            const copy = {
-                ...menu,
-                label: menu.title,
-                value: menu.path
-            };
-            if (menu.icon) {
-                copy.icon = () => h(MenuIcon, {
-                    icon: menu.icon
-                });
-            }
-            if (menu.children) {
-                copy.children = transform(menu.children);
-            }
-            return copy;
-        });
+        const transform = (menus) =>
+            menus.map((menu) => {
+                const copy = {
+                    ...menu,
+                    label: menu.title,
+                    value: menu.path,
+                };
+                if (menu.icon) {
+                    copy.icon = () =>
+                        h(MenuIcon, {
+                            icon: menu.icon,
+                        });
+                }
+                if (menu.children) {
+                    copy.children = transform(menu.children);
+                }
+                return copy;
+            });
         const fixedMenus = computed(() => transformByLocale(transformByAccess(transform(props.menus))));
         const menus = computed(() => flatNodes(fixedMenus.value));
         const activePath = computed(() => {
@@ -81,16 +77,14 @@ export default {
             } else if (/^\//.test(path)) {
                 router.push(path);
             } else {
-                console.warn(
-                    '[plugin-layout]: 菜单的path只能使以http(s)开头的网址或者路由地址'
-                );
+                console.warn('[plugin-layout]: 菜单的path只能使以http(s)开头的网址或者路由地址');
             }
         };
         return {
             activePath,
             fixedMenus,
-            onMenuClick
+            onMenuClick,
         };
-    }
+    },
 };
 </script>
diff --git a/packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue b/packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue
index ab24e975..3b0a0e76 100644
--- a/packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue
@@ -1,4 +1,4 @@
-<script>
+<script lang="jsx">
 import { ref, onBeforeMount } from 'vue';
 // eslint-disable-next-line import/extensions
 import Icons from '../icons';
@@ -6,7 +6,7 @@ import { validateContent } from '../helpers/svg';
 
 export default {
     props: {
-        icon: [String, Object]
+        icon: [String, Object],
     },
     setup(props) {
         const AIcon = ref(null);
@@ -31,16 +31,11 @@ export default {
                 return <AIcon.value />;
             }
             if (AText.value) {
-                return (
-                    <span
-                        class={'fes-layout-icon'}
-                        innerHTML={AText.value}
-                    ></span>
-                );
+                return <span class={'fes-layout-icon'} innerHTML={AText.value}></span>;
             }
             return null;
         };
-    }
+    },
 };
 </script>
 <style>
diff --git a/packages/fes-plugin-locale/src/index.js b/packages/fes-plugin-locale/src/index.js
index c75f8322..44e55456 100644
--- a/packages/fes-plugin-locale/src/index.js
+++ b/packages/fes-plugin-locale/src/index.js
@@ -1,6 +1,5 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
-import { getLocalesJSON } from './utils';
 import { name } from '../package.json';
 
 const namespace = 'plugin-locale';
@@ -21,6 +20,8 @@ export default (api) => {
         },
     });
 
+    const { getLocales } = require('./utils');
+
     api.addRuntimePluginKey(() => 'locale');
 
     const absoluteFilePath = join(namespace, 'core.js');
@@ -46,7 +47,7 @@ export default (api) => {
 
         const localeConfigFileBasePath = getLocaleFileBasePath();
 
-        const locales = getLocalesJSON(localeConfigFileBasePath);
+        const locales = getLocales(localeConfigFileBasePath);
 
         api.writeTmpFile({
             path: absoluteFilePath,
diff --git a/packages/fes-plugin-locale/src/runtime/core.tpl b/packages/fes-plugin-locale/src/runtime/core.tpl
index 006587e6..7f712c33 100644
--- a/packages/fes-plugin-locale/src/runtime/core.tpl
+++ b/packages/fes-plugin-locale/src/runtime/core.tpl
@@ -8,12 +8,22 @@
 import { isRef, unref } from 'vue';
 import { createI18n, useI18n } from '{{{ VUE_I18N_PATH }}}';
 import { plugin, ApplyPluginsType } from "@@/core/coreExports";
-import SelectLang from "./views/SelectLang";
+import SelectLang from "./views/SelectLang.vue";
+{{#REPLACE_LOCALES}}
+import {{importName}} from "{{{path}}}";
+{{/REPLACE_LOCALES}}
 
 // 共享出去
 plugin.share("locale", {useI18n, SelectLang });
 
-const locales = {{{REPLACE_LOCALES}}};
+const locales = [
+{{#REPLACE_LOCALES}}
+{
+    locale: "{{locale}}",
+    message: {{importName}}
+},
+{{/REPLACE_LOCALES}}
+];
 
 const defaultOptions = {{{REPLACE_DEFAULT_OPTIONS}}};
 
diff --git a/packages/fes-plugin-locale/src/utils/index.js b/packages/fes-plugin-locale/src/utils/index.js
index e80bde1d..2c915173 100644
--- a/packages/fes-plugin-locale/src/utils/index.js
+++ b/packages/fes-plugin-locale/src/utils/index.js
@@ -4,30 +4,18 @@ import { join, basename } from 'path';
 export function getLocales(cwd) {
     const files = glob
         .sync('*.js', {
-            cwd
+            cwd,
         })
-        .filter(
-            file => !file.endsWith('.d.ts')
-                && !file.endsWith('.test.js')
-                && !file.endsWith('.test.jsx')
-        ).map((fileName) => {
+        .filter((file) => !file.endsWith('.d.ts') && !file.endsWith('.test.js') && !file.endsWith('.test.jsx'))
+        .map((fileName) => {
             const locale = basename(fileName, '.js');
+            const importName = locale.replace('-', '');
             return {
+                importName,
                 locale,
-                message: `require('${join(cwd, fileName)}').default`
+                path: join(cwd, fileName),
             };
         });
 
     return files;
 }
-
-export function getLocalesJSON(cwd) {
-    const locales = getLocales(cwd);
-    return JSON.stringify(locales, null, 2)
-        .replace(
-            /"message": ("(.+?)")/g,
-            (global, m1, m2) => `"message": ${m2.replace(/\^/g, '"')}`
-        )
-        .replace(/\\r\\n/g, '\r\n')
-        .replace(/\\n/g, '\r\n');
-}
diff --git a/packages/fes-plugin-monaco-editor/package.json b/packages/fes-plugin-monaco-editor/package.json
index 9d45d408..a8d8697e 100644
--- a/packages/fes-plugin-monaco-editor/package.json
+++ b/packages/fes-plugin-monaco-editor/package.json
@@ -28,7 +28,8 @@
     "@fesjs/utils": "^2.0.4",
     "lodash-es": "^4.17.15",
     "monaco-editor": "^0.20.0",
-    "monaco-editor-webpack-plugin": "^1.9.1"
+    "monaco-editor-webpack-plugin": "^1.9.1",
+    "vite-plugin-monaco-editor": "^1.0.10"
   },
   "peerDependencies": {
     "@fesjs/fes": "^2.0.0",
diff --git a/packages/fes-plugin-monaco-editor/src/index.js b/packages/fes-plugin-monaco-editor/src/index.js
index 73beff65..5e3a852b 100644
--- a/packages/fes-plugin-monaco-editor/src/index.js
+++ b/packages/fes-plugin-monaco-editor/src/index.js
@@ -26,9 +26,7 @@ export default (api) => {
     });
 
     const absoluteFilePath = join(namespace, 'core.js');
-
     const absRuntimeFilePath = join(namespace, 'runtime.js');
-
     const absLoaderFilePath = join(namespace, 'loader.js');
     const absEditorFilePath = join(namespace, 'editor.vue');
 
@@ -76,10 +74,18 @@ export default (api) => {
 
     api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
 
-    api.chainWebpack((webpackConfig) => {
-        webpackConfig.plugin('monaco-editor').use(require('monaco-editor-webpack-plugin'), [api.config?.monacoEditor || {}]);
-        return webpackConfig;
-    });
+    if (api.builder.isVite) {
+        api.modifyBundleConfig((config) => {
+            const monacoEditorPlugin = require('vite-plugin-monaco-editor').default;
+            config?.plugins?.push(monacoEditorPlugin(api.config?.monacoEditor || {}));
+        });
+        //
+    } else {
+        api.chainWebpack((webpackConfig) => {
+            webpackConfig.plugin('monaco-editor').use(require('monaco-editor-webpack-plugin'), [api.config?.monacoEditor || {}]);
+            return webpackConfig;
+        });
+    }
 
     api.addConfigType(() => ({
         source: name,
diff --git a/packages/fes-plugin-monaco-editor/src/runtime/core.tpl b/packages/fes-plugin-monaco-editor/src/runtime/core.tpl
index 2570bb95..9cfaf549 100644
--- a/packages/fes-plugin-monaco-editor/src/runtime/core.tpl
+++ b/packages/fes-plugin-monaco-editor/src/runtime/core.tpl
@@ -1,4 +1,4 @@
-import Editor from './editor';
+import Editor from './editor.vue';
 import _monaco from './loader';
 
 export const MonacoEditor = Editor;
diff --git a/packages/fes-plugin-sass/src/index.js b/packages/fes-plugin-sass/src/index.js
index 2f2d5d22..8614082d 100644
--- a/packages/fes-plugin-sass/src/index.js
+++ b/packages/fes-plugin-sass/src/index.js
@@ -1,8 +1,5 @@
-
 export default (api) => {
-    const {
-        utils
-    } = api;
+    const { utils } = api;
 
     api.describe({
         key: 'sass',
@@ -13,25 +10,29 @@ export default (api) => {
                     sassOptions: joi.object(),
                     prependData: joi.alternatives(joi.string(), joi.func()),
                     sourceMap: joi.boolean(),
-                    webpackImporter: joi.boolean()
+                    webpackImporter: joi.boolean(),
                 });
             },
-            default: {}
-        }
+            default: {},
+        },
     });
 
-    api.chainWebpack((memo, { createCSSRule }) => {
-        createCSSRule({
-            lang: 'sass',
-            test: /\.(sass|scss)(\?.*)?$/,
-            loader: require.resolve('sass-loader'),
-            options: utils.deepmerge(
-                {
-                    implementation: require('sass')
-                },
-                api.config.sass || {}
-            )
+    if (api.builder.isVite) {
+        // vite 不需要处理
+    } else {
+        api.chainWebpack((memo, { createCSSRule }) => {
+            createCSSRule({
+                lang: 'sass',
+                test: /\.(sass|scss)(\?.*)?$/,
+                loader: require.resolve('sass-loader'),
+                options: utils.deepmerge(
+                    {
+                        implementation: require('sass'),
+                    },
+                    api.config.sass || {},
+                ),
+            });
+            return memo;
         });
-        return memo;
-    });
+    }
 };
diff --git a/packages/fes-preset-built-in/src/plugins/features/globalCSS.js b/packages/fes-preset-built-in/src/plugins/features/globalCSS.js
index 195d2f2d..1f7d6aeb 100644
--- a/packages/fes-preset-built-in/src/plugins/features/globalCSS.js
+++ b/packages/fes-preset-built-in/src/plugins/features/globalCSS.js
@@ -13,5 +13,5 @@ export default (api) => {
         .filter((file) => existsSync(file))
         .slice(0, 1);
 
-    api.addEntryCodeAhead(() => `${globalCSSFile.map((file) => `require('${winPath(relative(absTmpPath, file))}');`).join('')}`);
+    api.addEntryCodeAhead(() => `${globalCSSFile.map((file) => `import '${winPath(relative(absTmpPath, file))}';`).join('')}`);
 };
diff --git a/packages/fes-template-vite1/.env b/packages/fes-template-vite1/.env
new file mode 100644
index 00000000..e6737d5f
--- /dev/null
+++ b/packages/fes-template-vite1/.env
@@ -0,0 +1 @@
+FES_APP_PUBLISH_ERROR_PAGE=helloworld
diff --git a/packages/fes-template-vite1/.env.prod b/packages/fes-template-vite1/.env.prod
new file mode 100644
index 00000000..1ebc4df4
--- /dev/null
+++ b/packages/fes-template-vite1/.env.prod
@@ -0,0 +1 @@
+FES_APP_PUBLISH_ERROR_PAGE=helloProduction
\ No newline at end of file
diff --git a/packages/fes-template-vite1/.eslintrc.js b/packages/fes-template-vite1/.eslintrc.js
new file mode 100644
index 00000000..fa1e7f3b
--- /dev/null
+++ b/packages/fes-template-vite1/.eslintrc.js
@@ -0,0 +1,11 @@
+module.exports = {
+    extends: ['@webank/eslint-config-webank/vue.js'],
+    overrides: [
+        {
+            files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+        },
+    ],
+    env: {
+        jest: true,
+    },
+};
diff --git a/packages/fes-template-vite1/.fes.js b/packages/fes-template-vite1/.fes.js
new file mode 100644
index 00000000..07aa82f0
--- /dev/null
+++ b/packages/fes-template-vite1/.fes.js
@@ -0,0 +1,90 @@
+// .fes.js 只负责管理编译时配置，只能使用plain Object
+
+export default {
+    // exportStatic: {},
+    define: {
+        __DEV__: false
+    },
+    title: '海贼王',
+    router: {
+        mode: 'hash'
+    },
+    access: {
+        roles: {
+            admin: ['*'],
+            menuTest: ['/', '/menuTest']
+        }
+    },
+    request: {
+        dataField: 'result'
+    },
+    mock: {
+        prefix: '/v2'
+    },
+    proxy: {
+        '/v2': {
+            target: 'https://api.douban.com/',
+            changeOrigin: true
+        }
+    },
+    layout: {
+        title: 'Fes.js',
+        footer: 'Created by MumbleFE',
+        multiTabs: false,
+        navigation: 'side',
+        theme: 'dark',
+        menus: [
+            {
+                name: 'index',
+                icon: '/wine-outline.svg',
+                match: ['/route/*']
+            },
+            {
+                name: 'store'
+            },
+            {
+                name: 'editor',
+                icon: '/wine-outline.svg'
+            },
+            {
+                title: '$externalLink',
+                icon: 'UserOutlined',
+                path: 'https://www.baidu.com'
+            },
+            {
+                name: 'mock'
+            },
+            {
+                title: '菜单权限测试',
+                children: [
+                    {
+                        title: '子菜单',
+                        path: '/menuTest'
+                    },
+                ]
+            },
+            {
+                name: 'cssModule'
+            },
+            {
+                name: 'pinia'
+            }
+        ]
+    },
+    locale: {
+        legacy: true
+    },
+    enums: {
+        status: [
+            ['0', '无效的'],
+            ['1', '有效的']
+        ]
+    },
+    vuex: {
+        strict: true
+    },
+    dynamicImport: true,
+    monacoEditor: {
+        languages: ['javascript', 'typescript', 'html', 'json']
+    }
+};
diff --git a/packages/fes-template-vite1/.fes.local.js b/packages/fes-template-vite1/.fes.local.js
new file mode 100644
index 00000000..62fab3c1
--- /dev/null
+++ b/packages/fes-template-vite1/.fes.local.js
@@ -0,0 +1,5 @@
+export default {
+    // define: {
+    //     __DEV__: true
+    // },
+}
\ No newline at end of file
diff --git a/packages/fes-template-vite1/.fes.prod.js b/packages/fes-template-vite1/.fes.prod.js
new file mode 100644
index 00000000..153393d8
--- /dev/null
+++ b/packages/fes-template-vite1/.fes.prod.js
@@ -0,0 +1,6 @@
+// .fes.js 只负责管理编译时配置，只能使用plain Object
+
+
+export default {
+    publicPath: 'https://gw.alipayobjects.com/'
+};
diff --git a/packages/fes-template-vite1/.gitignore b/packages/fes-template-vite1/.gitignore
new file mode 100644
index 00000000..df903b98
--- /dev/null
+++ b/packages/fes-template-vite1/.gitignore
@@ -0,0 +1,11 @@
+.DS_Store
+
+# dependencies
+/node_modules
+/coverage
+
+# fes
+/src/.fes
+/src/.fes-production
+/src/.fes-test
+/.env.local
diff --git a/packages/fes-template-vite1/LICENSE b/packages/fes-template-vite1/LICENSE
new file mode 100644
index 00000000..0978fbf7
--- /dev/null
+++ b/packages/fes-template-vite1/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present webank
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/fes-template-vite1/README.md b/packages/fes-template-vite1/README.md
new file mode 100644
index 00000000..538aac0b
--- /dev/null
+++ b/packages/fes-template-vite1/README.md
@@ -0,0 +1,12 @@
+# fes 模版
+
+内部测试用，不对外发布
+
+
+## 环境变量
+
+* 业务代码使用的全局变量，使用 webpack define 定义
+* 针对不同的环境构建的变量
+    * 开发环境 .evn.local  
+    * .env 定义环境变量
+    * .env.xxx 定义特定的环境变
\ No newline at end of file
diff --git a/packages/fes-template-vite1/__tests__/add.js b/packages/fes-template-vite1/__tests__/add.js
new file mode 100644
index 00000000..d5c874a0
--- /dev/null
+++ b/packages/fes-template-vite1/__tests__/add.js
@@ -0,0 +1,5 @@
+import sum from '@/utils/sum';
+
+test('adds 1 + 2 to equal 3', () => {
+    expect(sum(1, 2)).toBe(3);
+});
diff --git a/packages/fes-template-vite1/index.html b/packages/fes-template-vite1/index.html
new file mode 100644
index 00000000..02276de9
--- /dev/null
+++ b/packages/fes-template-vite1/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+        <%= title %>
+    </title>
+    <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
+</head>
+
+<body>
+    <div id="<%= mountElementId %>"></div>
+    <script>
+        console.log('<%= FES_APP_PUBLISH_ERROR_PAGE %>');
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/fes-template-vite1/mock.js b/packages/fes-template-vite1/mock.js
new file mode 100644
index 00000000..3499d487
--- /dev/null
+++ b/packages/fes-template-vite1/mock.js
@@ -0,0 +1,143 @@
+export default function ({ cgiMock, mockjs, utils }) {
+    const { Random } = mockjs;
+
+    // 测试 proxy 与 mock 用例集合
+    cgiMock('/movie/in_theaters_mock', (req, res) => {
+        res.send(
+            JSON.stringify({
+                code: '0',
+                msg: '',
+                result: {
+                    text: 'movie:  movie/in_theaters_mock ~~~~~',
+                },
+            }),
+        );
+    });
+    cgiMock('/movie/test_mock', (req, res) => {
+        res.send(
+            JSON.stringify({
+                code: '0',
+                msg: '',
+                result: {
+                    text: 'mock:  movie/test_mock',
+                },
+            }),
+        );
+    });
+
+    // 测试用例: mock.js change，重现请求，需要能拉最新的数据
+    cgiMock('/watchtest', (req, res) => {
+        res.send(
+            JSON.stringify({
+                code: '0',
+                msg: '',
+                result: {
+                    text: '通过 register 测试 mock watch: 初始状态',
+                },
+            }),
+        );
+    });
+
+    // 返回一个数字
+    // cgiMock('/number', 666);
+    cgiMock('/number', 999);
+
+    // 返回一个json
+    cgiMock({
+        url: '/json',
+        result: {
+            code: '400101',
+            msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String",
+            transactionTime: '20170309171146',
+            success: false,
+        },
+    });
+
+    // 利用 mock.js 产生随机文本
+    cgiMock('/text', Random.cparagraph());
+
+    // 返回一个字符串 利用 mock.js 产生随机字符
+    cgiMock(
+        '/random',
+        mockjs.mock({
+            'string|1-10': '★',
+        }),
+    );
+
+    // 正则匹配url, 返回一个字符串
+    cgiMock(/\/abc|\/xyz/, 'regexp test!');
+
+    // option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.
+    cgiMock(/\/function$/, (req, res) => {
+        res.send('function test');
+    });
+
+    // 返回文本 readFileSync
+    cgiMock('/file', utils.file('./package.json'));
+
+    // 更复杂的规则配置
+    cgiMock({
+        url: /\/who/,
+        method: 'GET',
+        result(req, res) {
+            if (req.query.name === 'kwan') {
+                res.json({ kwan: '孤独患者' });
+            } else {
+                res.send('Nooooooooooo');
+            }
+        },
+        headers: {
+            'Content-Type': 'text/plain',
+            'Content-Length': '123',
+            ETag: '12345',
+        },
+        cookies: [
+            {
+                name: 'myname',
+                value: 'kwan',
+                maxAge: 900000,
+                httpOnly: true,
+            },
+        ],
+    });
+
+    // 携带参数的请求
+    cgiMock('/v2/audit/list', (req, res) => {
+        const { currentPage, pageSize, isAudited } = req.body;
+        res.send({
+            code: '0',
+            msg: '',
+            data: {
+                currentPage,
+                pageSize,
+                totalPage: 2,
+                totalCount: 12,
+                pageData: Array.from({ length: pageSize }, () => ({
+                    title: Random.title(),
+                    authorName: Random.cname(),
+                    authorId: Random.name(),
+                    createTime: Date.now(),
+                    updateTime: Date.now(),
+                    readCount: Random.integer(60, 1000),
+                    favoriteCount: Random.integer(1, 50),
+                    postId: '12323',
+                    serviceTag: '业务类型',
+                    productTag: '产品类型',
+                    requestTag: '需求类型',
+                    handleTag: '已采纳',
+                    postType: 'voice',
+                    postStatus: isAudited ? 'pass' : 'auditing',
+                    auditStatus: 'audit1',
+                })),
+            },
+        });
+    });
+
+    // multipart/form-data 类型
+    cgiMock('/v2/upload', (req, res) => {
+        res.send({
+            code: '0',
+            msg: '文件上传成功',
+        });
+    });
+}
diff --git a/packages/fes-template-vite1/package.json b/packages/fes-template-vite1/package.json
new file mode 100644
index 00000000..a7d18750
--- /dev/null
+++ b/packages/fes-template-vite1/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@fesjs/template",
+  "version": "2.0.0",
+  "description": "fes项目模版",
+  "scripts": {
+    "build": "fes build",
+    "prod": "FES_ENV=prod fes build",
+    "analyze": "ANALYZE=1 fes build",
+    "dev": "fes dev",
+    "test": "fes test"
+  },
+  "keywords": [
+    "管理端",
+    "fes",
+    "fast",
+    "easy",
+    "strong"
+  ],
+  "files": [
+    ".eslintrc.js",
+    ".gitignore",
+    ".fes.js",
+    ".fes.prod.js",
+    "mock.js",
+    "package.json",
+    "README.md",
+    "tsconfig.json",
+    "/src",
+    "/config"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+    "directory": "packages/fes-template"
+  },
+  "author": "harrywan",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+  },
+  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fesjs/fes": "^2.0.0",
+    "@fesjs/plugin-access": "^2.0.0",
+    "@fesjs/plugin-layout": "^4.0.0",
+    "@fesjs/plugin-locale": "^3.0.0",
+    "@fesjs/plugin-model": "^2.0.0",
+    "@fesjs/plugin-enums": "^2.0.0",
+    "@fesjs/plugin-jest": "^2.0.0",
+    "@fesjs/plugin-vuex": "^2.0.0",
+    "@fesjs/plugin-request": "^2.0.0",
+    "@fesjs/plugin-sass": "^2.0.0",
+    "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
+    "@fesjs/plugin-windicss": "^2.0.0",
+    "@fesjs/plugin-pinia": "^2.0.0",
+    "@fesjs/fes-design": "^0.3.3",
+    "@fesjs/build-vite": "^1.0.0",
+    "vue": "^3.0.5",
+    "vuex": "^4.0.0",
+    "pinia": "^2.0.11"
+  },
+  "private": true
+}
\ No newline at end of file
diff --git a/packages/fes-template-vite1/public/logo.png b/packages/fes-template-vite1/public/logo.png
new file mode 100644
index 00000000..4958e971
Binary files /dev/null and b/packages/fes-template-vite1/public/logo.png differ
diff --git a/packages/fes-template-vite1/public/wine-outline.svg b/packages/fes-template-vite1/public/wine-outline.svg
new file mode 100644
index 00000000..cebc9931
--- /dev/null
+++ b/packages/fes-template-vite1/public/wine-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Wine</title><path d="M398.57 80H113.43v16S87.51 272 256 272 398.57 96 398.57 96zM256 272v160" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 432H160"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M112 160h288"/></svg>
\ No newline at end of file
diff --git a/packages/fes-template-vite1/src/app.jsx b/packages/fes-template-vite1/src/app.jsx
new file mode 100644
index 00000000..9e119776
--- /dev/null
+++ b/packages/fes-template-vite1/src/app.jsx
@@ -0,0 +1,27 @@
+import { access as accessApi, pinia } from '@fesjs/fes';
+import PageLoading from '@/components/PageLoading.vue';
+import UserCenter from '@/components/UserCenter.vue';
+import { useStore } from '@/store/main';
+
+export const beforeRender = {
+    loading: <PageLoading />,
+    action() {
+        const { setRole } = accessApi;
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                const store = useStore(pinia);
+                store.$patch({
+                    userName: '李雷',
+                });
+                setRole('admin');
+                resolve({
+                    userName: '李雷',
+                });
+            }, 1000);
+        });
+    },
+};
+
+export const layout = {
+    customHeader: <UserCenter />,
+};
diff --git a/packages/fes-template-vite1/src/common/service.js b/packages/fes-template-vite1/src/common/service.js
new file mode 100644
index 00000000..1b66499d
--- /dev/null
+++ b/packages/fes-template-vite1/src/common/service.js
@@ -0,0 +1,19 @@
+import { requestWrap } from '@fesjs/fes';
+
+// TODO
+// 响应体控制
+// formData 控制
+// 错误控制
+// 跳错误页面 || 或者重新登录
+// 段时间内不能重复发送的请求
+
+// or
+export default requestWrap({
+    login: {
+        url: '',
+        throttle: 300,
+        options: {
+            method: 'get'
+        }
+    }
+});
diff --git a/packages/fes-template-vite1/src/components/PageLoading.vue b/packages/fes-template-vite1/src/components/PageLoading.vue
new file mode 100644
index 00000000..e544021a
--- /dev/null
+++ b/packages/fes-template-vite1/src/components/PageLoading.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="page-loading">
+        <f-spin size="large" stroke="#5384ff" />
+    </div>
+</template>
+<script>
+import { FSpin } from '@fesjs/fes-design';
+
+export default {
+    components: {
+        FSpin
+    },
+    setup() {
+        return {
+        };
+    }
+};
+</script>
+<style>
+.page-loading{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>
diff --git a/packages/fes-template-vite1/src/components/UserCenter.vue b/packages/fes-template-vite1/src/components/UserCenter.vue
new file mode 100644
index 00000000..8b0829a5
--- /dev/null
+++ b/packages/fes-template-vite1/src/components/UserCenter.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="user-center">{{initialState.userName}}</div>
+</template>
+<script>
+import { useModel } from '@fesjs/fes';
+
+export default {
+    setup() {
+        const initialState = useModel('@@initialState');
+        return {
+            initialState
+        };
+    }
+};
+</script>
+<style lang="less">
+.user-center {
+    text-align: right;
+}
+</style>
diff --git a/packages/fes-template-vite1/src/global.css b/packages/fes-template-vite1/src/global.css
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/fes-template-vite1/src/global.scss b/packages/fes-template-vite1/src/global.scss
new file mode 100644
index 00000000..02c8d234
--- /dev/null
+++ b/packages/fes-template-vite1/src/global.scss
@@ -0,0 +1,5 @@
+html {
+    body {
+        font-size: 16px;
+    }
+}
diff --git a/packages/fes-template-vite1/src/images/icon.png b/packages/fes-template-vite1/src/images/icon.png
new file mode 100644
index 00000000..ff46a842
Binary files /dev/null and b/packages/fes-template-vite1/src/images/icon.png differ
diff --git a/packages/fes-template-vite1/src/locales/en-US.js b/packages/fes-template-vite1/src/locales/en-US.js
new file mode 100644
index 00000000..e3efe619
--- /dev/null
+++ b/packages/fes-template-vite1/src/locales/en-US.js
@@ -0,0 +1,8 @@
+
+export default {
+    home: 'home',
+    store: 'store',
+    editor: 'editor',
+    externalLink: 'externalLink',
+    mock: 'mock'
+};
diff --git a/packages/fes-template-vite1/src/locales/zh-CN.js b/packages/fes-template-vite1/src/locales/zh-CN.js
new file mode 100644
index 00000000..55fc4666
--- /dev/null
+++ b/packages/fes-template-vite1/src/locales/zh-CN.js
@@ -0,0 +1,8 @@
+
+export default {
+    home: '首页',
+    store: '状态管理',
+    editor: '编辑器',
+    externalLink: '外部链接',
+    mock: '代理'
+};
diff --git a/packages/fes-template-vite1/src/models/user.js b/packages/fes-template-vite1/src/models/user.js
new file mode 100644
index 00000000..3d8575f8
--- /dev/null
+++ b/packages/fes-template-vite1/src/models/user.js
@@ -0,0 +1,8 @@
+import { ref } from 'vue';
+
+export default function user() {
+    const count = ref(1);
+    return {
+        count
+    };
+}
diff --git a/packages/fes-template-vite1/src/pages/cssModule.vue b/packages/fes-template-vite1/src/pages/cssModule.vue
new file mode 100644
index 00000000..78d29fd8
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/cssModule.vue
@@ -0,0 +1,24 @@
+<template>
+    <div :class="$style.red">
+        字体颜色
+    </div>
+</template>
+<config>
+{
+    "name": "cssModule",
+    "title": "css Module 测试"
+}
+</config>
+<script>
+export default {
+    setup() {
+        return {};
+    }
+};
+</script>
+
+<style module>
+.red {
+  color: red;
+}
+</style>
diff --git a/packages/fes-template-vite1/src/pages/editor.vue b/packages/fes-template-vite1/src/pages/editor.vue
new file mode 100644
index 00000000..6aed5d6b
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/editor.vue
@@ -0,0 +1,42 @@
+<template>
+    <monaco-editor
+        ref="editorRef"
+        v-model="json"
+        :language="language"
+        height="200px"
+        check
+    />
+    {{json}}
+</template>
+<config>
+{
+    "name": "editor",
+    "title": "$editor",
+    "keep-alive": true
+}
+</config>
+<script>
+import { onMounted, ref } from 'vue';
+import { MonacoEditor } from '@fesjs/fes';
+
+export default {
+    components: {
+        MonacoEditor
+    },
+    setup() {
+        const editorRef = ref();
+        const json = ref('');
+        const language = ref('json');
+        onMounted(() => {
+            setTimeout(() => {
+                language.value = 'html';
+            }, 3000);
+        });
+        return {
+            editorRef,
+            json,
+            language
+        };
+    }
+};
+</script>
diff --git a/packages/fes-template-vite1/src/pages/index.vue b/packages/fes-template-vite1/src/pages/index.vue
new file mode 100644
index 00000000..b78e7fa2
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="page">
+        home222
+        <FButton class="m-2">Button</FButton>
+    </div>
+</template>
+
+<script>
+import { FButton } from '@fesjs/fes-design';
+
+export default {
+    components: {
+        FButton,
+    },
+    setup() {
+        return {};
+    },
+};
+</script>
+
+<style>
+.page {
+    height: 1000px;
+}
+</style>
+
+<config>
+{
+    "name": "index",
+    "title": "$home"
+}
+</config>
diff --git a/packages/fes-template-vite1/src/pages/menuTest/@id.vue b/packages/fes-template-vite1/src/pages/menuTest/@id.vue
new file mode 100644
index 00000000..4977d60f
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/menuTest/@id.vue
@@ -0,0 +1,30 @@
+<template>
+    <div class="page">
+        menuTest: {{route.params}}
+    </div>
+</template>
+<config>
+{
+    "title": "menuTest-详情"
+}
+</config>
+<script>
+import { useRoute } from '@fesjs/fes';
+
+export default {
+    components: {
+    },
+    setup() {
+        const route = useRoute();
+        return {
+            route
+        };
+    }
+};
+</script>
+
+<style>
+.page {
+    min-height: 100vh;
+}
+</style>
diff --git a/packages/fes-template-vite1/src/pages/menuTest/index.vue b/packages/fes-template-vite1/src/pages/menuTest/index.vue
new file mode 100644
index 00000000..d3ce9c1b
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/menuTest/index.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="page">
+        menuTest-index
+    </div>
+</template>
+<config>
+{
+    "title": "menuTest"
+}
+</config>
+<script>
+export default {
+    components: {
+    },
+    setup() {
+        return {
+        };
+    }
+};
+</script>
+
+<style>
+.page {
+    min-height: 100vh;
+}
+</style>
diff --git a/packages/fes-template-vite1/src/pages/menuTest/layout.vue b/packages/fes-template-vite1/src/pages/menuTest/layout.vue
new file mode 100644
index 00000000..6e323c0d
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/menuTest/layout.vue
@@ -0,0 +1,8 @@
+<template>
+    <div style="display: flex;flex-direction: column;">
+        <router-link to="/menuTest/1">Go to 1</router-link>
+        <router-link to="/menuTest/2">Go to 2</router-link>
+        <router-link to="/menuTest/3">Go to 3</router-link>
+    </div>
+    <router-view />
+</template>
diff --git a/packages/fes-template-vite1/src/pages/mock.vue b/packages/fes-template-vite1/src/pages/mock.vue
new file mode 100644
index 00000000..aa4d72f4
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/mock.vue
@@ -0,0 +1,47 @@
+<template>
+    <div>mock and proxy</div>
+</template>
+<config>
+{
+    "name": "mock",
+    "title": "$mock"
+}
+</config>
+<script setup>
+import { request } from '@fesjs/fes';
+
+console.log('测试 mock!!');
+
+request('/v2/file')
+    .then((data) => {
+        console.log(data);
+    })
+    .catch((err) => {
+        console.log(err);
+    });
+
+request('/v2/movie/in_theaters_mock', { a: 1 }, 'get')
+    .then((data) => {
+        console.log(data);
+    })
+    .catch((err) => {
+        console.log(err);
+    });
+
+console.log('测试 proxy!!');
+
+request(
+    '/v2/movie/in_theaters_proxy',
+    { a: 1 },
+    {
+        method: 'get',
+        headers: { Accept: '*/*' },
+    },
+)
+    .then((resp) => {
+        console.log(resp);
+    })
+    .catch((err) => {
+        console.log(err);
+    });
+</script>
diff --git a/packages/fes-template-vite1/src/pages/pinia.vue b/packages/fes-template-vite1/src/pages/pinia.vue
new file mode 100644
index 00000000..f55fc856
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/pinia.vue
@@ -0,0 +1,31 @@
+<template>
+    <div>{{store.counter}}</div>
+    <FButton class="m-2" @click="store.increment">Button</FButton>
+</template>
+<config>
+{
+    "name": "pinia",
+    "title": "pinia"
+}
+</config>
+<script>
+import { useStore } from '@/store/main';
+import { FButton } from '@fesjs/fes-design';
+
+export default {
+    components: {
+        FButton
+    },
+    setup() {
+        const store = useStore();
+        console.log(store);
+        return {
+            store
+        };
+    }
+};
+</script>
+
+<style>
+
+</style>
diff --git a/packages/fes-template-vite1/src/pages/route/@id.vue b/packages/fes-template-vite1/src/pages/route/@id.vue
new file mode 100644
index 00000000..0bb17929
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/route/@id.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        {{params.id}}
+    </div>
+</template>
+<config>
+{
+    "name": "activeRoute",
+    "title": "动态路由"
+}
+</config>
+<script>
+import { useRoute } from '@fesjs/fes';
+
+export default {
+    setup() {
+        const { params } = useRoute();
+        return {
+            params
+        };
+    }
+};
+</script>
diff --git a/packages/fes-template-vite1/src/pages/store.vue b/packages/fes-template-vite1/src/pages/store.vue
new file mode 100644
index 00000000..63c9df2b
--- /dev/null
+++ b/packages/fes-template-vite1/src/pages/store.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="page">
+        <h4>Vuex</h4>
+        <div>
+            <button @click="increment">click me：{{doubleCount}}</button>
+        </div>
+        <div>
+            <button :disabled="disabled" @click="login">async login</button>
+        </div>
+        <div>
+            <button @click="fooBarIncrement">
+                foo/bar：{{fooBarDoubleCount}}
+            </button>
+        </div>
+        <div>{{address}}</div>
+    </div>
+</template>
+<config>
+{
+    "name": "store",
+    "title": "$store"
+}
+</config>
+<script>
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';
+
+export default {
+    setup() {
+        const store = useStore();
+        console.log('store==>', store);
+        const disabled = ref(false);
+        return {
+            address: computed(() => store.getters[GETTER_TYPES.user.address]),
+            doubleCount: computed(
+                () => store.getters[GETTER_TYPES.counter.doubleCount]
+            ),
+            disabled,
+            increment: () => store.commit(MUTATION_TYPES.counter.increment),
+            login: () => {
+                disabled.value = true;
+                store.dispatch(ACTION_TYPES.user.login).then((res) => {
+                    // eslint-disable-next-line no-alert
+                    window.alert(res);
+                    disabled.value = false;
+                });
+            },
+            fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment),
+            fooBarDoubleCount: computed(
+                () => store.getters[GETTER_TYPES.fooBar.doubleCount]
+            )
+        };
+    }
+};
+</script>
+<style scoped>
+.page {
+}
+</style>
diff --git a/packages/fes-template-vite1/src/store/main.js b/packages/fes-template-vite1/src/store/main.js
new file mode 100644
index 00000000..0541aae9
--- /dev/null
+++ b/packages/fes-template-vite1/src/store/main.js
@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+
+// useStore could be anything like useUser, useCart
+// the first argument is a unique id of the store across your application
+export const useStore = defineStore('main', {
+    // other options...
+    state: () => ({
+        // all these properties will have their type inferred automatically
+        counter: 0,
+        name: 'Eduardo',
+        isAdmin: true
+    }),
+    actions: {
+        increment() {
+            this.counter++;
+        },
+        randomizeCounter() {
+            this.counter = Math.round(100 * Math.random());
+        }
+    }
+});
diff --git a/packages/fes-template-vite1/src/stores/counter.js b/packages/fes-template-vite1/src/stores/counter.js
new file mode 100644
index 00000000..78070ba3
--- /dev/null
+++ b/packages/fes-template-vite1/src/stores/counter.js
@@ -0,0 +1,23 @@
+export default {
+    namespaced: true,
+    state: () => ({
+        count: 0
+    }),
+    mutations: {
+        increment(state) {
+            state.count++;
+        }
+    },
+    getters: {
+        doubleCount(state) {
+            return state.count * 2;
+        }
+    },
+    actions: {
+        asyncIncrement({ commit }) {
+            setTimeout(() => {
+                commit('increment');
+            }, 2000);
+        }
+    }
+};
diff --git a/packages/fes-template-vite1/src/stores/foo/bar.js b/packages/fes-template-vite1/src/stores/foo/bar.js
new file mode 100644
index 00000000..78070ba3
--- /dev/null
+++ b/packages/fes-template-vite1/src/stores/foo/bar.js
@@ -0,0 +1,23 @@
+export default {
+    namespaced: true,
+    state: () => ({
+        count: 0
+    }),
+    mutations: {
+        increment(state) {
+            state.count++;
+        }
+    },
+    getters: {
+        doubleCount(state) {
+            return state.count * 2;
+        }
+    },
+    actions: {
+        asyncIncrement({ commit }) {
+            setTimeout(() => {
+                commit('increment');
+            }, 2000);
+        }
+    }
+};
diff --git a/packages/fes-template-vite1/src/stores/plugin-loger.js b/packages/fes-template-vite1/src/stores/plugin-loger.js
new file mode 100644
index 00000000..6b8a9826
--- /dev/null
+++ b/packages/fes-template-vite1/src/stores/plugin-loger.js
@@ -0,0 +1,3 @@
+import { createLogger } from 'vuex';
+
+export default createLogger();
diff --git a/packages/fes-template-vite1/src/stores/user.js b/packages/fes-template-vite1/src/stores/user.js
new file mode 100644
index 00000000..337bf8f8
--- /dev/null
+++ b/packages/fes-template-vite1/src/stores/user.js
@@ -0,0 +1,54 @@
+export default {
+    namespaced: true,
+    state: () => ({
+        name: 'aring',
+        age: 20,
+        count: 0
+    }),
+    mutations: {
+        increment(state) {
+            state.count++;
+        }
+    },
+    getters: {
+        doubleCount(state) {
+            return state.count * 2;
+        }
+    },
+    actions: {
+        asyncIncrement({ commit }) {
+            setTimeout(() => {
+                commit('increment');
+            }, 2000);
+        },
+        login() {
+            return new Promise((reslove) => {
+                setTimeout(() => {
+                    console.log('login');
+                    reslove('OK');
+                }, 1000);
+            });
+        }
+    },
+    modules: {
+        address: {
+            state: () => ({
+                province: '广东省',
+                city: '深圳市',
+                zone: '南山区'
+            }),
+            getters: {
+                address(state) {
+                    return state.province + state.city + state.zone;
+                }
+            }
+        },
+        posts: {
+            namespaced: true,
+            state: () => ({}),
+            mutations: {
+                doSomething() {}
+            }
+        }
+    }
+};
diff --git a/packages/fes-template-vite1/src/utils/sum.js b/packages/fes-template-vite1/src/utils/sum.js
new file mode 100644
index 00000000..54b28e5a
--- /dev/null
+++ b/packages/fes-template-vite1/src/utils/sum.js
@@ -0,0 +1,3 @@
+export default function sum(a, b) {
+    return a + b;
+}
diff --git a/packages/fes-template-vite1/tsconfig.json b/packages/fes-template-vite1/tsconfig.json
new file mode 100644
index 00000000..b7fce5b7
--- /dev/null
+++ b/packages/fes-template-vite1/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true,
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@@/*": ["./src/.fes/*"]
+    }
+  },
+  "include": [
+    "src/**/*",
+    "tests/**/*",
+    "test/**/*",
+    "__test__/**/*",
+    "typings/**/*",
+    "config/**/*",
+    ".eslintrc.js",
+    ".stylelintrc.js",
+    ".prettierrc.js",
+    "src/.fes/configType.d.ts"
+  ],
+  "exclude": ["node_modules", "build", "dist", "scripts", "src/.fes/*", "webpack", "jest"]
+}
diff --git a/packages/fes-template/.eslintrc.js b/packages/fes-template/.eslintrc.js
index 6300816f..fa1e7f3b 100644
--- a/packages/fes-template/.eslintrc.js
+++ b/packages/fes-template/.eslintrc.js
@@ -2,13 +2,10 @@ module.exports = {
     extends: ['@webank/eslint-config-webank/vue.js'],
     overrides: [
         {
-            files: [
-                '**/__tests__/*.{j,t}s?(x)',
-                '**/tests/unit/**/*.spec.{j,t}s?(x)'
-            ]
-        }
+            files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+        },
     ],
     env: {
-        jest: true
-    }
+        jest: true,
+    },
 };
diff --git a/packages/fes-template/src/app.js b/packages/fes-template/src/app.js
index 167601b7..9e119776 100644
--- a/packages/fes-template/src/app.js
+++ b/packages/fes-template/src/app.js
@@ -1,8 +1,6 @@
-
-
 import { access as accessApi, pinia } from '@fesjs/fes';
-import PageLoading from '@/components/PageLoading';
-import UserCenter from '@/components/UserCenter';
+import PageLoading from '@/components/PageLoading.vue';
+import UserCenter from '@/components/UserCenter.vue';
 import { useStore } from '@/store/main';
 
 export const beforeRender = {
@@ -13,17 +11,17 @@ export const beforeRender = {
             setTimeout(() => {
                 const store = useStore(pinia);
                 store.$patch({
-                    userName: '李雷'
+                    userName: '李雷',
                 });
                 setRole('admin');
                 resolve({
-                    userName: '李雷'
+                    userName: '李雷',
                 });
             }, 1000);
         });
-    }
+    },
 };
 
 export const layout = {
-    customHeader: <UserCenter />
+    customHeader: <UserCenter />,
 };
diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
index c8fb7f9b..5d9811a3 100644
--- a/packages/fes-template/src/pages/index.vue
+++ b/packages/fes-template/src/pages/index.vue
@@ -10,12 +10,11 @@ import { FButton } from '@fesjs/fes-design';
 
 export default {
     components: {
-        FButton
+        FButton,
     },
     setup() {
-        return {
-        };
-    }
+        return {};
+    },
 };
 </script>
 
diff --git a/yarn.lock b/yarn.lock
index d36d4801..225a8556 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10607,6 +10607,11 @@ vite-plugin-html@^3.2.0:
     node-html-parser "^5.3.3"
     pathe "^0.2.0"
 
+vite-plugin-monaco-editor@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.npmmirror.com/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.0.10.tgz#cd370f68d4121bced6f902c6284649cc8eca4170"
+  integrity sha512-7yTAFIE0SefjCmfnjrvXOl53wkxeSASc/ZIcB5tZeEK3vAmHhveV8y3f90Vp8b+PYdbUipjqf91mbFbSENkpcw==
+
 vite-plugin-windicss@^1.8.3:
   version "1.8.3"
   resolved "https://registry.npmmirror.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.3.tgz#d5fe923ad60f5d80f153a4fae5f837d56caa25cb"