fix:路由处理,CSS处理，样式处理，全局变量处理

.env

@@ -1,5 +1,11 @@
 # port
-VITE_PORT = 8001
+VITE_DEV_PORT = 8001
+
+# development path
+VITE_DEV_PATH = /
+
+# production path
+VITE_PRO_PATH = /
 
 # spa-title
 VITE_GLOB_APP_TITLE = GoView

.eslintignore

@@ -0,0 +1,11 @@
+node_modules/
+public/
+es/
+lib/
+dist/
+package.json
+src/assets/
+plop-templates/
+handlebars/
+website/
+build/

.eslintrc.js

@@ -1,23 +1,24 @@
 module.exports = {
   root: true,
+  parser: 'vue-eslint-parser',
+  globals: {
+    postMessage: true
+  },
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+      tsx: true,
+    },
+  },
   env: {
     node: true,
   },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
-  parserOptions: {
-    parser: "babel-eslint",
-  },
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "prettier/prettier": [
-      "warn",
-      {
-        // singleQuote: none,
-        // semi: false,
-        trailingComma: "es5",
-      },
-    ],
   },
 };
 

Makefile

@@ -6,7 +6,11 @@ dev:
 build:
 	npm run build
 
+lint:
+	npm run lint
+
 	
 help:
 	@echo "    make dev 开发模式"
-	@echo "    make build 编译模式"
+	@echo "    make build 编译模式"
+	@echo "    make lint 格式校验"

package.json

@@ -1,10 +1,11 @@
 {
   "name": "go-view",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "lint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix --ext"
   },
   "dependencies": {
     "@vicons/ionicons5": "^0.11.0",
@@ -17,10 +18,18 @@
   },
   "devDependencies": {
     "@types/node": "^16.11.1",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
     "@vitejs/plugin-vue": "^1.9.3",
     "@vitejs/plugin-vue-jsx": "^1.2.0",
     "@vue/compiler-sfc": "^3.2.20",
     "default-passive-events": "^2.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.2.0",
+    "prettier": "^2.5.1",
     "sass": "^1.43.2",
     "sass-loader": "^12.2.0",
     "typescript": "^4.4.4",
@@ -29,5 +38,8 @@
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^1.2.1",
     "vue-tsc": "^0.28.7"
+  },
+  "lint-staged": {
+    "*.{vue,js,ts,tsx}": "eslint --fix"
   }
-}
+}

prettier.config.js

@@ -1,12 +1,12 @@
 module.exports = {
-  printWidth: 80, // 每行代码长度（默认80）
-  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
-  useTabs: false, // 是否使用tab进行缩进（默认false）
-  singleQuote: false, // 使用单引号（默认false）
-  semi: true, // 声明结尾使用分号(默认true)
-  trailingComma: 'es5', // 多行使用拖尾逗号（默认none）
-  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
-  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
-  arrowParens: "avoid", // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
-};
-
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  singleQuote: true,
+  semi: false,
+  trailingComma: "es5",
+  bracketSpacing: true,
+  jsxSingleQuote: true,
+  jsxBracketSameLine: false,
+  arrowParens: "avoid"
+}

src/App.vue

@@ -34,7 +34,9 @@ const getThemeOverrides = computed(
   }
 )
 
-const getDarkTheme = computed(() => designStore.darkTheme ? darkTheme : undefined)
+const getDarkTheme = computed(() =>
+  designStore.darkTheme ? darkTheme : undefined
+)
 </script>
 
 <style lang="scss"></style>

src/api/axios.ts

@@ -0,0 +1,38 @@
+import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
+import { ResultEnum } from "@/enums/httpEnum"
+import { ErrorPageNameMap } from "@/enums/pageEnum"
+import { redirectErrorPage } from '@/utils'
+
+const axiosInstance = axios.create({
+  baseURL: import.meta.env.DEV ? import.meta.env.VITE_DEV_PATH : import.meta.env.VITE_PRO_PATH,
+  timeout: ResultEnum.TIMEOUT,
+})
+
+axiosInstance.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    config.headers = {}
+    config.data = {}
+    return config
+  },
+  (error: AxiosRequestConfig) => {
+    Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+axiosInstance.interceptors.response.use(
+  (res: AxiosResponse) => {
+    const { code } = res.data as { code: number }
+    if (code === ResultEnum.DATA_SUCCESS) return Promise.resolve(res.data)
+    // 重定向
+    if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
+    return Promise.reject(res.data)
+  },
+  (err: AxiosResponse) => {
+    const { code } = err.data as { code: number }
+    if (ErrorPageNameMap.get(code)) redirectErrorPage(code)
+    Promise.reject(err)
+  }
+)
+
+export default axiosInstance

src/api/http.ts

@@ -0,0 +1,34 @@
+import axiosInstance from './axios'
+import { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum'
+
+// 缓存处理
+const filterUrl = (url: string) => {
+  return url.indexOf('?') !== -1 ? `${url}&time=${new Date().getTime()}` : `${url}?time=${new Date().getTime()}`
+}
+
+export const get = (params: object, url: string) => {
+  return axiosInstance({
+    url: filterUrl(url),
+    method: RequestEnum.GET,
+    params
+  })
+}
+
+export const post = (params: object, url: string, headersType: string) => {
+  return axiosInstance({
+    url: url,
+    method: RequestEnum.POST,
+    data: params,
+    headers: {
+      'Content-Type': headersType || ContentTypeEnum.JSON
+    }
+  })
+}
+
+export const del = (params: object, url: string) => {
+  return axiosInstance({
+    url: filterUrl(url),
+    method: RequestEnum.DELETE,
+    params
+  })
+}

src/enums/httpEnum.ts

@@ -2,21 +2,23 @@
  * @description: 请求结果集
  */
 export enum ResultEnum {
+  DATA_SUCCESS = 0,
   SUCCESS = 200,
-  ERROR = -1,
+  SERVER_ERROR = 500,
+  SERVER_FORBIDDEN = 403,
+  NOT_FOUND = 404,
   TIMEOUT = 10042,
-  TYPE = 'success',
 }
 
 /**
  * @description: 请求方法
  */
 export enum RequestEnum {
-  GET = 'GET',
-  POST = 'POST',
-  PATCH = 'PATCH',
-  PUT = 'PUT',
-  DELETE = 'DELETE',
+  GET = 'get',
+  POST = 'post',
+  PATCH = 'patch',
+  PUT = 'put',
+  DELETE = 'delete',
 }
 
 /**

src/enums/pageEnum.ts

@@ -1,15 +1,26 @@
+import { ResultEnum } from "@/enums/httpEnum"
+
 export enum PageEnum {
   // 登录
   BASE_LOGIN = '/login',
   BASE_LOGIN_NAME = 'Login',
+
   //重定向
   REDIRECT = '/redirect',
   REDIRECT_NAME = 'Redirect',
+
   // 首页
   BASE_HOME = '/project',
   BASE_HOME_NAME = 'Project',
-  //首页跳转默认路由
-  BASE_HOME_REDIRECT = '/project',
+
   // 错误
-  ERROR_PAGE_NAME = 'ErrorPage',
+  ERROR_PAGE_NAME_403 = 'ErrorPage403',
+  ERROR_PAGE_NAME_404 = 'ErrorPage404',
+  ERROR_PAGE_NAME_500 = 'ErrorPage500',
 }
+
+export const ErrorPageNameMap = new Map([
+  [ResultEnum.NOT_FOUND, PageEnum.ERROR_PAGE_NAME_404],
+  [ResultEnum.SERVER_FORBIDDEN, PageEnum.ERROR_PAGE_NAME_403],
+  [ResultEnum.SERVER_ERROR, PageEnum.ERROR_PAGE_NAME_500],
+])

src/layout/components/Main/index.vue

@@ -9,8 +9,3 @@
     </template>
   </RouterView>
 </template>
-
-<script lang="ts" setup>
-import { defineProps} from 'vue'
-const props = defineProps(['notNeedKey', 'animate'])
-</script>

src/main.ts

@@ -5,7 +5,7 @@ import { setupStore } from '@/store';
 import { setupNaive, setupDirectives } from '@/plugins';
 import { AppProvider } from '@/components/Application';
 
-async function bootstrap() {
+async function appInit() {
   const appProvider = createApp(AppProvider);
 
   const app = createApp(App);
@@ -31,4 +31,4 @@ async function bootstrap() {
   app.mount('#app', true);
 }
 
-void bootstrap();
+void appInit();

src/plugins/globalMethods.ts

@@ -1,5 +1,5 @@
 /**
- * 注册全局方法 待完善
+ * 注册全局方法
  * @param app
  */
 export function setupGlobalMethods() {}

src/router/base.ts

@@ -1,42 +1,70 @@
+import { RouteRecordRaw } from 'vue-router'
 import type { AppRouteRecordRaw } from '@/router/types';
-import { ErrorPage, RedirectName, Layout } from '@/router/constant';
+import { ErrorPage404, ErrorPage403, ErrorPage500, Layout } from '@/router/constant';
+import { PageEnum } from '@/enums/pageEnum'
+
+
+export const LoginRoute: RouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+  },
+};
+
+export const HttpErrorPage: RouteRecordRaw[] = [
+  {
+    path: '/error/404',
+    name: PageEnum.ERROR_PAGE_NAME_404,
+    component: ErrorPage404,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_404,
+    },
+  },
+  {
+    path: '/error/403',
+    name: PageEnum.ERROR_PAGE_NAME_403,
+    component: ErrorPage403,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_403,
+    },
+  },
+  {
+    path: '/error/500',
+    name: PageEnum.ERROR_PAGE_NAME_500,
+    component: ErrorPage500,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_500,
+    },
+  },
+]
 
 // 404 on a page
 export const ErrorPageRoute: AppRouteRecordRaw = {
   path: '/:path(.*)*',
   name: 'ErrorPage',
-  component: Layout,
+  component: ErrorPage404,
   meta: {
-    title: 'ErrorPage',
+    title: PageEnum.ERROR_PAGE_NAME_404,
     hideBreadcrumb: true,
-  },
-  children: [
-    {
-      path: '/:path(.*)*',
-      name: 'ErrorPageSon',
-      component: ErrorPage,
-      meta: {
-        title: 'ErrorPage',
-        hideBreadcrumb: true,
-      },
-    },
-  ],
+  }
 };
 
 export const RedirectRoute: AppRouteRecordRaw = {
   path: '/redirect',
-  name: RedirectName,
+  name: PageEnum.REDIRECT_NAME,
   component: Layout,
   meta: {
-    title: RedirectName,
+    title: PageEnum.REDIRECT_NAME,
   },
   children: [
     {
       path: '/redirect/:path(.*)',
-      name: RedirectName,
+      name: PageEnum.REDIRECT_NAME,
       component: () => import('@/views/redirect/index.vue'),
       meta: {
-        title: RedirectName,
+        title: PageEnum.REDIRECT_NAME,
         hideBreadcrumb: true,
       },
     },

src/router/constant.ts

@@ -1,6 +1,8 @@
-export const RedirectName = 'Redirect';
+export const ErrorPage404 = () => import('@/views/exception/404.vue');
 
-export const ErrorPage = () => import('@/views/exception/404.vue');
+export const ErrorPage403 = () => import('@/views/exception/403.vue');
+
+export const ErrorPage500 = () => import('@/views/exception/500.vue');
 
 export const Layout = () => import('@/layout/index.vue');
 

src/router/index.ts

@@ -1,9 +1,10 @@
-import type { App } from 'vue';
+import type { App } from 'vue'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import { RedirectRoute } from '@/router/base';
-import { createRouterGuards } from './router-guards';
-import { PageEnum } from '@/enums/pageEnum';
+import { RedirectRoute } from '@/router/base'
+import { createRouterGuards } from './router-guards'
+import { PageEnum } from '@/enums/pageEnum'
 import modules from '@/router/modules'
+import { HttpErrorPage, LoginRoute } from '@/router/base'
 
 const RootRoute: Array<RouteRecordRaw> = [
   {
@@ -15,24 +16,15 @@ const RootRoute: Array<RouteRecordRaw> = [
       title: 'Root',
     },
     children: [
+      ...HttpErrorPage,
       modules.projectRoutes
     ]
   }
 ]
 
-export const LoginRoute: RouteRecordRaw = {
-  path: '/login',
-  name: 'Login',
-  component: () => import('@/views/login/index.vue'),
-  meta: {
-    title: '登录',
-  },
-};
 
 export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute];
 
-console.log(constantRouter)
-
 const router = createRouter({
   history: createWebHashHistory(''),
   routes: constantRouter,
@@ -42,6 +34,6 @@ const router = createRouter({
 export function setupRouter(app: App) {
   app.use(router);
   // 创建路由守卫
-  createRouterGuards(router);
+  createRouterGuards(router)
 }
 export default router

src/router/router-guards.ts

@@ -1,6 +1,5 @@
-import type { RouteRecordRaw } from 'vue-router';
 import { Router } from 'vue-router';
-import { ErrorPageRoute } from '@/router/base';
+import { PageEnum } from '@/enums/pageEnum'
 
 export function createRouterGuards(router: Router) {
   // 前置
@@ -8,14 +7,12 @@ export function createRouterGuards(router: Router) {
     const Loading = window['$loading'] || null;
     Loading && Loading.start();
 
-    //添加404
-    const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name);
+    console.log(to)
+    const isErrorPage = router.getRoutes().findIndex((item) => item.name === to.name);
     if (isErrorPage === -1) {
-      router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw);
+      next({ name: PageEnum.ERROR_PAGE_NAME_404 })
     }
-
     next()
-    Loading && Loading.finish();
   })
 
   router.afterEach((to, _, failure) => {

src/styles/common/mixins/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'go';
+$theme-light: 'light';
+$theme-dart: 'dart';
+$state-prefix: 'is-';

src/styles/common/mixins/mixins.scss

@@ -0,0 +1,30 @@
+@import './config.scss';
+
+@mixin go($block) {
+  $B: $namespace + '-' + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin go-l($block) {
+  $B: $namespace + '-' + $theme-light + '-' + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin go-d($block) {
+  $B: $namespace + '-' + $theme-dart + '-' + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}

src/styles/common/style.scss

@@ -0,0 +1,13 @@
+@import './var.scss';
+
+// 毛玻璃
+.--background-filter {
+  backdrop-filter: $--filter-blur;
+  background-color: $--filter-color;
+}
+
+// 边框圆角
+.--border-radius {
+  border-radius: $--border-radius;
+  overflow: hidden;
+}

src/styles/common/var.scss

@@ -0,0 +1,6 @@
+// 模糊
+$--filter-blur: blur(2px);
+// 毛玻璃
+$--filter-color: rgba(0, 0, 0, 0.07);
+// 边框
+$--border-radius: 5px;

src/styles/global/style.scss

@@ -1,9 +0,0 @@
-@import url(./var.scss);
-// 毛玻璃
-.bg-filter {
-  backdrop-filter: blur(2px);
-  background-color: rgba(0, 0, 0, 0.07);
-}
-.border {
-  border-radius: $radius;
-}

src/styles/global/var.scss

@@ -1,2 +0,0 @@
-// 边框
-$radius: 5px;

src/utils/index.ts

@@ -1,12 +1,14 @@
-import { h, unref } from 'vue';
-import { NIcon, NTag } from 'naive-ui';
-import type { App, Plugin } from 'vue';
+import { h } from 'vue';
+import { NIcon } from 'naive-ui';
+import { ResultEnum } from "@/enums/httpEnum"
+import { ErrorPageNameMap } from "@/enums/pageEnum"
+import router from '@/router';
 
 /**
- * 生成一个用不重复的ID
+ * * 生成一个用不重复的ID
  * @param { Number } randomLength
  */
-function getUUID(randomLength: number) {
+export function getUUID(randomLength: number) {
   return Number(
     Math.random()
       .toString()
@@ -16,28 +18,20 @@ function getUUID(randomLength: number) {
 
 
 /**
- * render new Tag
- * */
- const newTagColors = { color: '#f90', textColor: '#fff', borderColor: '#f90' };
- export function renderNew(type = 'warning', text = 'New', color: object = newTagColors) {
-   return () =>
-     h(
-       NTag as any,
-       {
-         type,
-         round: true,
-         size: 'small',
-         color,
-       },
-       { default: () => text }
-     );
- }
-
-/**
- * render 图标
- * */
-export function renderIcon(icon: any) {
+ * * render 图标
+ */
+export const renderIcon = (icon: any) => {
   return () => h(NIcon, null, { default: () => h(icon) });
 }
 
-export { getUUID };
+/**
+ * * 错误页重定向
+ * @param icon 
+ * @returns 
+ */
+export const redirectErrorPage = (code: ResultEnum) => {
+  router.push({
+    name: ErrorPageNameMap.get(code)
+  })
+}
+

src/views/exception/404.vue

@@ -1,40 +1,43 @@
 <template>
-  <div class="flex flex-col justify-center page-container">
+  <div class="go-error">
     <div class="text-center">
       <img src="~@/assets/images/exception/404.svg" alt="" />
     </div>
     <div class="text-center">
       <h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
-      <n-button type="info" @click="goHome">回到首页</n-button>
     </div>
+    <n-button type="info" @click="goHome">回到首页</n-button>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { useRouter } from 'vue-router';
-  const router = useRouter();
-  function goHome() {
-    router.push('/');
-  }
+import { useRouter } from 'vue-router'
+import { PageEnum } from '@/enums/pageEnum'
+const router = useRouter()
+function goHome() {
+  router.push({
+    name: PageEnum.BASE_HOME_NAME
+  })
+}
 </script>
 
 <style lang="scss" scoped>
-  .page-container {
-    width: 100%;
-    border-radius: 4px;
-    padding: 50px 0;
-    height: 100vh;
-
-    .text-center {
-      h1 {
-        color: #666;
-        padding: 20px 0;
-      }
-    }
-
-    img {
-      width: 350px;
-      margin: 0 auto;
+@include go(error) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 100px 0;
+  .text-center {
+    h1 {
+      color: #666;
+      padding: 20px 0;
     }
   }
+
+  img {
+    width: 350px;
+    margin: 0 auto;
+  }
+}
 </style>

src/views/login/index.vue

@@ -1,68 +1,70 @@
 <template>
-  <div class="view-account">
-    <div class="view-account-header"></div>
-    <div class="view-account-container">
-      <div class="view-account-top">
-        <div class="view-account-top-logo">
-          <img src="~@/assets/images/logo.png" alt="" />
+  <div class="go-login">
+    <div class="login-account">
+      <div class="login-account-header"></div>
+      <div class="login-account-container">
+        <div class="login-account-top">
+          <div class="login-account-top-logo">
+            <img src="~@/assets/images/logo.png" alt="" />
+          </div>
+          <div class="login-account-top-desc">
+            GoView
+          </div>
         </div>
-        <div class="view-account-top-desc">
-          GoView
-        </div>
-      </div>
-      <div class="view-account-form">
-        <n-form
-          ref="formRef"
-          label-placement="left"
-          size="large"
-          :model="formInline"
-          :rules="rules"
-        >
-          <n-form-item path="username">
-            <n-input
-              v-model:value="formInline.username"
-              placeholder="请输入用户名"
-            >
-              <template #prefix>
-                <n-icon size="18" color="#808695">
-                  <PersonOutline />
-                </n-icon>
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item path="password">
-            <n-input
-              v-model:value="formInline.password"
-              type="password"
-              show-password-toggle
-              placeholder="请输入密码"
-            >
-              <template #prefix>
-                <n-icon size="18" color="#808695">
-                  <LockClosedOutline />
-                </n-icon>
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item class="default-color">
-            <div class="flex justify-between">
-              <div class="flex-initial">
-                <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
+        <div class="login-account-form">
+          <n-form
+            ref="formRef"
+            label-placement="left"
+            size="large"
+            :model="formInline"
+            :rules="rules"
+          >
+            <n-form-item path="username">
+              <n-input
+                v-model:value="formInline.username"
+                placeholder="请输入用户名"
+              >
+                <template #prefix>
+                  <n-icon size="18" color="#808695">
+                    <PersonOutline />
+                  </n-icon>
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item path="password">
+              <n-input
+                v-model:value="formInline.password"
+                type="password"
+                show-password-toggle
+                placeholder="请输入密码"
+              >
+                <template #prefix>
+                  <n-icon size="18" color="#808695">
+                    <LockClosedOutline />
+                  </n-icon>
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item class="default-color">
+              <div class="flex justify-between">
+                <div class="flex-initial">
+                  <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
+                </div>
               </div>
-            </div>
-          </n-form-item>
-          <n-form-item>
-            <n-button
-              type="primary"
-              @click="handleSubmit"
-              size="large"
-              :loading="loading"
-              block
-            >
-              登录
-            </n-button>
-          </n-form-item>
-        </n-form>
+            </n-form-item>
+            <n-form-item>
+              <n-button
+                type="primary"
+                @click="handleSubmit"
+                size="large"
+                :loading="loading"
+                block
+              >
+                登录
+              </n-button>
+            </n-form-item>
+          </n-form>
+        </div>
       </div>
     </div>
   </div>
@@ -72,10 +74,7 @@
 import { reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMessage } from 'naive-ui'
-import {
-  PersonOutline,
-  LockClosedOutline,
-} from '@vicons/ionicons5'
+import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
 
 interface FormState {
   username: string
@@ -117,46 +116,48 @@ const handleSubmit = (e: Event) => {
 </script>
 
 <style lang="scss" scoped>
-.view-account {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: auto;
-  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
+@include go(login) {
+  .login-account {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: auto;
+    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
 
-  &-container {
-    flex: 1;
-    padding: 32px 0;
-    width: 384px;
-    margin: 0 auto;
-    margin-top: 100px;
-  }
-
-  &-top {
-    padding: 32px 0;
-    text-align: center;
-
-    &-desc {
-      font-size: 14px;
-      color: #808695;
+    &-container {
+      flex: 1;
+      padding: 32px 0;
+      width: 384px;
+      margin: 0 auto;
+      margin-top: 100px;
     }
-  }
 
-  &-other {
-    width: 100%;
-  }
+    &-top {
+      padding: 32px 0;
+      text-align: center;
 
-  .default-color {
-    color: #515a6e;
+      &-desc {
+        font-size: 14px;
+        color: #808695;
+      }
+    }
 
-    .ant-checkbox-wrapper {
+    &-other {
+      width: 100%;
+    }
+
+    .default-color {
       color: #515a6e;
+
+      .ant-checkbox-wrapper {
+        color: #515a6e;
+      }
     }
   }
 }
 
 @media (min-width: 768px) {
-  .view-account {
+  .login-account {
     background-repeat: no-repeat;
     background-position: 50%;
     background-size: 100%;

types/config.d.ts

@@ -1,6 +1 @@
-export interface GlobEnvConfig {
-  // 标题
-  VITE_GLOB_APP_TITLE: string;
-  // 端口
-  VITE_PORT: number;
-}
+

types/vite-env.d.ts

@@ -1 +1,12 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  // 标题
+  VITE_GLOB_APP_TITLE: string;
+  // 端口
+  VITE_DEV_PORT: number;
+  // 开发地址
+  VITE_DEV_PATH: string
+  // 生产地址
+  VITE_PRO_PATH: string
+}

vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from "path"
-import { OUTPUT_DIR } from './build/constant';
+import { OUTPUT_DIR } from './build/constant'
 
 function pathResolve(dir: string) {
   return resolve(process.cwd(), '.', dir);
@@ -25,9 +25,8 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        modifyVars: {},
         javascriptEnabled: true,
-        additionalData: `@import "src/styles/global/var.scss";`,
+        additionalData: `@import "src/styles/common/style.scss";@import "src/styles/common/mixins/mixins.scss";`,
       },
     },
   },