feat: 使用vite

.browserslistrc

-> 1%
-last 2 versions
-not dead
-not ie 11
\ No newline at end of file

.env

-VUE_APP_DEBUG='true'
-VUE_APP_BASE_URL='/'
-VUE_APP_HTTP_TIMEOUT=50000
-VUE_APP_PAGE_SIZE=10
+VITE_DEBUG='true'
+VITE_BASE_URL='/'
+VITE_HTTP_TIMEOUT=50000
+VITE_PAGE_SIZE=10

.env.development

 NODE_ENV='development'
-VUE_APP_DEBUG='true'
-VUE_APP_HTTP_HEADER={}
-VUE_APP_HTTP_BASE_URL='http://192.168.101.1:28080'
-VUE_APP_HTTP_NOAUTH_BASE_URL=''
+VITE_DEBUG='true'
+VITE_HTTP_HEADER={}
+VITE_HTTP_BASE_URL='http://192.168.101.1:28080'
+VITE_HTTP_NOAUTH_BASE_URL=''

.env.production

 NODE_ENV='production'
-VUE_APP_DEBUG='false'
-VUE_APP_HTTP_HEADER={}
-VUE_APP_HTTP_BASE_URL='https://yw.fshsfl.com/api'
-VUE_APP_HTTP_NOAUTH_BASE_URL=''
+VITE_DEBUG='false'
+VITE_HTTP_HEADER={}
+VITE_HTTP_BASE_URL='https://yw.fshsfl.com/api'
+VITE_HTTP_NOAUTH_BASE_URL=''

.env.testing

 NODE_ENV='testing'
-VUE_APP_DEBUG='true'
-VUE_APP_HTTP_HEADER={}
-VUE_APP_HTTP_BASE_URL='http://192.168.101.1:8001'
-VUE_APP_HTTP_NOAUTH_BASE_URL=''
\ No newline at end of file
+VITE_DEBUG='true'
+VITE_HTTP_HEADER={}
+VITE_HTTP_BASE_URL='http://192.168.101.1:8001'
+VITE_HTTP_NOAUTH_BASE_URL=''
\ No newline at end of file

.eslintrc.js

-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended'
-  ],
-  parserOptions: {
-    parser: '@babel/eslint-parser'
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
-}

.gitignore

-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj

.postcssrc.js

-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  plugins: {
-    "postcss-import": {},
-    "postcss-url": {},
-    "postcss-aspect-ratio-mini": {},
-    // "postcss-cssnext": {},
-    "postcss-px-to-viewport": {
-      viewportWidth: 375,
-      viewportHeight: 667,
-      unitPrecision: 3,
-      viewportUnit: "vw",
-      selectorBlackList: [".ignore", ".hairlines"],
-      minPixelValue: 3,
-      mediaQuery: false
-    },
-    cssnano: {
-      autoprefixer: false,
-      "postcss-zindex": false
-    }
-  }
-};

.vscode/extensions.json

+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

README.md

-# vue3-project
+# vuen
 
-## Project setup
+This template should help get you started developing with Vue 3 in Vite.
 
-```
-yarn install
-```
+## Recommended IDE Setup
 
-### Compiles and hot-reloads for development
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-```
-yarn serve
-```
+## Customize configuration
 
-### Compiles and minifies for production
+See [Vite Configuration Reference](https://vitejs.dev/config/).
 
-```
-yarn build
-```
-
-### Lints and fixes files
+## Project Setup
 
+```sh
+npm install
 ```
-yarn lint
-```
-
-### Customize configuration
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### Compile and Hot-Reload for Development
 
----
-
-### 添加模块?
-
-1. modules内创建新的模块
-   
-   > 如果想要在首页看到该页面，配置页面时在 meta 中配置 title
-2. modules/index 配置模块名称
-3. packages.json 中配置相应的打包脚本
-
----  
-### 子应用
-
-1. 融资计算器
-2. 融资意向
-3. 项目查询
-4. 合同签约 （E签宝， 预览签署文件）
-5. 还款计划 （支付）
-6. 还款计划查询  （发票预览下载）
-7. 自助服务
-8. 客户信息变更
-
-
-#### 导航
-- 首页
-- 消息 （消息通知）
-- 我的
-
-#### 首页
-1.  还款情况展示
-2. 最近消息展板
-3. 定位
+```sh
+npm run dev
+```
 
-#### 我的
+### Compile and Minify for Production
 
-1. 我的奖励券
-2. 关联项目
-3. 投诉与建议 
-4. 关于我们
-5. 退出登录 
+```sh
+npm run build
+```

babel.config.js

-module.exports = {
-  presets: [
-    // '@vue/cli-plugin-babel/preset'
-    [
-      '@vue/app',
-      {
-        useBuiltIns: 'entry',
-        polyfills: [
-            'es6.promise',  // 安装的依赖
-            'es.symbol'
-        ],
-        corejs: 3
-      }
-    ]
-  ],
-  plugins: [
-    [
-      'import', {
-        libraryName: 'vant',
-        libraryDirectory: 'es',
-        style: true
-      },
-      'vant'
-    ],
-  ]
-}

index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}

package.json

 {
-  "name": "komatsu-lease-app",
-  "version": "0.1.0",
-  "private": true,
+  "name": "vuen",
+  "version": "0.0.0",
   "scripts": {
-    "serve": "cross-env VUE_APP_ENV=local VUE_APP_TARGET=schedule vue-cli-service serve",
-    "dev": "cross-env VUE_APP_ENV=local vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "build:customer_manage:dev": "cross-env VUE_APP_ENV=development VUE_APP_TARGET=customer_manage vue-cli-service build --mode development --dest dist/dev/customer_manage",
-    "build:customer_manage:test": "cross-env VUE_APP_ENV=testing VUE_APP_TARGET=customer_manage vue-cli-service build --mode testing --dest dist/test/customer_manage"
+    "dev": "VITE_TARGET=ALL vite ",
+    "build": "vite build"
   },
-  "browserSlist": [
-    "> 1%",
-    "last 2 versions"
-  ],
   "dependencies": {
     "@hips/plugin-vue-jssdk": "^1.1.2",
-    "@vueuse/core": "^8.5.0",
-    "axios": "^0.27.2",
-    "babel-plugin-import": "^1.13.5",
-    "babel-polyfill": "^6.26.0",
-    "core-js": "^3.8.3",
-    "es6-promise": "^4.2.8",
-    "moment": "^2.29.3",
-    "postcss": "^8.2.15",
-    "uuid": "^8.3.2",
-    "vant": "^3.5.0",
-    "vconsole": "^3.14.6",
-    "vue": "^3.2.13",
-    "vue-router": "^4.0.3",
-    "vuex": "^4.0.0"
+    "axios": "^1.2.0",
+    "moment": "^2.29.4",
+    "pinia": "^2.0.23",
+    "postcss-px-to-viewport": "^1.1.1",
+    "qs": "^6.11.0",
+    "uuid": "^9.0.0",
+    "vant": "^3.6.6",
+    "vconsole": "^3.15.0",
+    "vue": "^3.2.41",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.18.6",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "cross-env": "^5.2.0",
-    "cssnano": "^5.1.7",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "postcss-aspect-ratio-mini": "^1.1.0",
-    "postcss-import": "^14.1.0",
-    "postcss-px-to-viewport": "^1.1.1",
-    "postcss-url": "^10.1.3",
-    "stylus": "^0.55.0",
-    "stylus-loader": "^3.0.2"
+    "@vitejs/plugin-legacy": "^2.3.1",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "less": "^4.1.3",
+    "terser": "^5.16.0",
+    "vite": "^3.1.8",
+    "vite-plugin-pages": "^0.27.1",
+    "vite-plugin-style-import": "1.4.1"
   }
 }

public/index.html

-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <meta name="x5-cache" content="disable" />
-    <meta name="x5-fullscreen" content="true" />
-    <meta name="full-screen" content="yes" />
-    <meta
-      content="no-cache, no-store, must-revalidate"
-      http-equiv="Cache-Control"
-    />
-    <meta content="no-cache" http-equiv="Pragma" />
-    <meta content="0" http-equiv="Expires" />
-    <meta http-equiv="expires" content="0" />
-    <meta
-      name="viewport"
-      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"
-    />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/App.vue

@@ -17,7 +17,6 @@
       </template>
     </Suspense>
   </div>
-
 </template>
 
 <script>
@@ -31,20 +30,18 @@ export default {
     };
   },
   async mounted() {
-    const TempAccess = process.env.VUE_APP_ENV === 'local' ? '60243b9f-5f2b-41f8-8007-67984b5ae1cd' : ''
+    const TempAccess = import.meta.env.DEV ? '60243b9f-5f2b-41f8-8007-67984b5ae1cd' : ''
 
     const jumpRouter = await login(TempAccess)
 
     const route = this.$router;
-    route.replace(jumpRouter.path ? jumpRouter : `${route.options.routes[0].path}`);
-  },
-  methods: {
-  },
+    route.replace(jumpRouter.path ? jumpRouter : "applications");
+  }
 };
 </script>
 
-<style lang="stylus">
+<style lang="less">
 @import './style/reset.css';
-@import './style/var.styl';
-@import './style/init.styl';
+@import './style/var.less';
+@import './style/init.less';
 </style>

src/api/index.js

 import { get, post, put } from '@/utils/http'
 
-const baseURL = process.env.VUE_APP_HTTP_BASE_URL
+const baseURL = import.meta.env.VITE_HTTP_BASE_URL
 
 const api = {
   // getApproalFile(attachmentUUID, bucketName = 'hwfp'){//审批意见中的附件

src/assets/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
-import { router } from './router'
-import store from './store'
-import { Notify, Toast } from 'vant';
-import Vconsole from 'vconsole';
+import router from './router'
 import moment from 'moment'
-import '@babel/polyfill';
-import Es6Promise from 'es6-promise'
-Es6Promise.polyfill()
+import { Notify, Toast } from 'vant';
+
+moment.locale('zh-cn')
 
 let vConsole
-if (process.env.VUE_APP_DEBUG === "true") {
-    const VConsole = require("vconsole");
-    new VConsole(); // eslint-disable-line
-    vConsole = new Vconsole();
+if (import.meta.env.VITE_DEBUG === "true") {
+  let vc = await import("vconsole");
+  vConsole = new vc.default();
 }
 
-moment.locale('zh-cn') // 这里是进行了汉化 不写这句默认格式是外国的
+const app = createApp(App)
 
-createApp(App)
-.use(store)
-.use(router)
-.use(Notify)
-.use(Toast)
-.use(vConsole)
-.mount('#app')
+app.use(createPinia())
+app.use(router)
+app.use(Notify)
+app.use(Toast)
+app.use(vConsole)
+app.mount('#app')

src/modules/index.js

-export default [
-]
\ No newline at end of file

src/modules/selfService/api/index.js

+import { get, put, post, File, deleteReq } from '@/utils/http'
+
+const baseURL = import.meta.env.VITE_HTTP_BASE_URL
+const api = {
+  // getMakingList (data) { // 查询合同制作列表
+  //   return get(
+  //     `${baseURL}/hlct/v1/0/contracts/toMake`,
+  //     {...data}
+  //   )
+  // },
+};
+
+export default api;

src/modules/selfService/components/ListItem.vue

+<template>
+  <div class="contract-item">
+    <div class="item-title">
+      <div class="title-desc">
+        <div class="title-icon">
+          <slot name="icon" />
+        </div>
+        <div class="title-text">
+          <slot name="title" />
+        </div>
+      </div>
+      <div class="title-arrow">
+        <i class="arrow-right"></i>
+      </div>
+    </div>
+    <div class="item-warper">
+      <div class="item-info">
+        <div class="info-title">
+          <span>承租人</span>：
+        </div>
+        <div class="info-value">
+          <span>{{ itemInfo.tenantName }}</span>
+        </div>
+      </div>
+      <div class="item-info">
+        <div class="info-title">
+          <span>业务部门</span>：
+        </div>
+        <div class="info-value">
+          <span>{{ itemInfo.unitName }}</span>
+        </div>
+      </div>
+      <div class="item-info">
+        <div class="info-title">
+          <span>单据状态</span>：
+        </div>
+        <div class="info-value">
+          <span>{{ itemInfo.contractStatusMeaning }}</span>
+        </div>
+      </div>
+      <div class="item-info">
+        <div class="info-title">
+          <span>项目经理</span>：
+        </div>
+        <div class="info-value">
+          <span>{{ itemInfo.employeeName }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+let props = defineProps({
+  itemInfo: { 
+    type: Object, 
+    default() {
+      return {}
+    }
+  }, //是否必输
+});
+
+</script>
+
+<style lang="stylus" scoped>
+.contract-item 
+  display flex;
+  flex-flow column nowrap; 
+  background-color #fff;
+  color: #646566
+  border-radius 5%; 
+  padding 0.5rem;
+  margin-bottom: 20px
+
+  .item-title 
+    display flex;
+    flex-flow row nowrap;
+    justify-content space-between;
+    height 10vw;
+    line-height 9vw; 
+
+    .title-desc 
+      display flex;
+      flex-flow row nowrap;
+
+      .title-text 
+        font-size 4vw;
+        margin-left 2vw;
+      
+      .title-icon 
+        img
+          width 100%;
+          height 100%;
+        
+        width 7vw;
+        height 7vw;
+        margin-top 1vw;
+
+    .title-arrow 
+      margin-top 1vw;
+    
+  .item-warper 
+    display flex;
+    flex-flow row wrap;
+    justify-content space-around;
+    padding-left: 32px;
+    margin-top 1vw;
+    line-height 5vw;
+    font-size 3.5vw 
+
+    .item-info 
+      display flex;
+      flex-flow row nowrap;
+      width  50%;
+      // justify-content space-around;
+      .info-title 
+        color #888;
+        min-width 60px;
+        text-align left
+      
+      .info-value 
+        margin-left 5px;
+        min-width 60px;
+        word-break break-all
+
+.arrow-right 
+  box-sizing border-box;
+  position relative;
+  display block;
+  width 12px;
+  height 12px;
+  color #888;
+
+
+.arrow-rightafter 
+  content "";
+  display block;
+  box-sizing border-box;
+  position absolute;
+  width 8px;
+  height 8px;
+  border-bottom 1px solid;
+  border-right 1px solid;
+  transform rotate(-45deg);
+  right 6px;
+  top 4px;
+
+</style>

src/modules/selfService/store/index.js

+const state = {};
+
+export default {
+  namespaced: true,
+  state,
+};

src/modules/selfService/views/index.vue

+<template>
+  <div class="business container">
+    <section class="header-board">
+      <NavBar title="自助服务" left-arrow @click-left="goBack" />
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { goBack } from "@/utils/globalFun"
+import { NavBar } from "vant";
+import api from "../api";
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+let count = $ref(333)
+console.log(count);
+</script>
+
+<style scoped lang="less">
+</style>
+
+<route lang="yaml">
+  meta:
+    title: '自助服务'
+  </route>
+

src/router/index.js

-import allModules from '../modules'
-import { createRouter, createWebHashHistory } from 'vue-router';
-const applications = () => import('../views/applications.vue')
-let routes = [];
-if (process.env.VUE_APP_ENV === "local") {
+import { createRouter, createWebHashHistory } from 'vue-router'
+import routes from '~pages'
 
-  const applicationRoute = {
-    path: "/",
-    name: "applications",
-    component: applications,
-    meta: { moduleName: 'index' }
-  };
-  routes.push(applicationRoute);
+let realRoutes = routes;
 
-  allModules.map((moduleName) => {
-    // routes.push(...require(`@/modules/${app}/router`).default);
-    let Module = require(`@/modules/${moduleName}/router`).default || []
-    Module.forEach(route => { route.meta.moduleName = moduleName });
-    routes.push(...Module)
-  });
-} else {
-  routes.push(
-    ...require(`@/modules/${process.env.VUE_APP_TARGET}/router`).default,
-  );
+if (import.meta.env.PROD) {
+  let reg = new RegExp(`${import.meta.env.VITE_TARGET}`);
+  realRoutes = realRoutes.filter((route) => reg.test(route.path))
 }
 
-// routes.push({
-//   path: "*",
-//   redirect: routes[0].path
-// });
+console.info('已渲染路由--', realRoutes);
 
-export const router = createRouter({
-  history: createWebHashHistory(process.env.BASE_URL),
-  routes: routes
-});
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.VITE_HTTP_BASE_URL),
+  routes: realRoutes,
+})
+
+export default router
\ No newline at end of file

src/store/index.js

-import { createStore } from 'vuex'
-import allModules from '../modules'
-
-let modules = {};
-if (process.env.VUE_APP_ENV === "local") {
-  const apps = allModules;
-
-  apps.map((app) => {
-    let ary = app.split("-");
-    let moduleName = "";
-    ary.map((item, index) => {
-      if (index > 0) {
-        item = item.replace(item.charAt(0), item.charAt(0).toUpperCase());
-      }
-      moduleName += item;
-    });
-    modules[
-      moduleName
-    ] = require(`@/modules/${app}/store`).default;
-  });
-} else {
-  let ary = process.env.VUE_APP_TARGET.split("-");
-  let moduleName = "";
-  ary.map((item, index) => {
-    if (index > 0) {
-      item = item.replace(item.charAt(0), item.charAt(0).toUpperCase());
-    }
-    moduleName += item;
-  });
-  modules[
-    moduleName
-  ] = require(`@/modules/${process.env.VUE_APP_TARGET}/store`).default;
-}
-
-const store = {
-  modules,
-  state: {
-  },
-  getters: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-};
-
-export default createStore(store);
-

src/stores/counter.js

+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

src/style/init.less

+// ios 安全区设置
+@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) {
+  body {
+    /* 适配齐刘海*/
+    padding-top: constant(safe-area-inset-top);
+    /* 兼容 iOS < 11.2 */
+    padding-top: env(safe-area-inset-top);
+    /* 兼容 iOS >= 11.2 */
+
+    /* padding-top: calc(40px(原来的bottom值) + constant(safe-area-inset-top)); */
+
+    /* 适配底部黑条*/
+    padding-bottom: constant(safe-area-inset-bottom);
+    /* 兼容 iOS < 11.2 */
+    padding-bottom: env(safe-area-inset-bottom);
+    /* 兼容 iOS >= 11.2 */
+  }
+}
+
+//  基础配置
+body {
+  height: 100vh;
+  width: 100vw;
+  box-sizing: border-box;
+  background-color: @background-color ;
+  position: fixed;
+
+  #app {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background-color: @background-color;
+  }
+}
+
+
+.container {
+  height: 100%;
+  width: 100%;
+  background-color: @background-color;
+  color: @text-color;
+  font-size: 3.74vw;
+}
+
+
+input {
+  border: none;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+}
+
+
+// vant 样式调整   
+.cell-title {
+  :deep(.van-cell__title span::before) {
+    display: inline-block;
+    height: 50%;
+    width: 3px;
+    background-color: #3D59C0;
+    content: "";
+    margin-right: 5px;
+  }
+
+  :deep(.van-cell__value) {
+    color: black;
+  }
+}
+
+#app {
+  .van-nav-bar .van-icon {
+    color: #333;
+  }
+
+  .van-nav-bar__text {
+    color: #3d59c0;
+  }
+
+  .van-tabs--line .van-tabs__wrap {
+    height: 9.733vw;
+  }
+}
\ No newline at end of file

src/style/init.styl

-// ios 安全区设置
-@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) 
-  body 
-    /* 适配齐刘海*/
-    padding-top constant(safe-area-inset-top);  /* 兼容 iOS < 11.2 */
-    padding-top env(safe-area-inset-top); /* 兼容 iOS >= 11.2 */
-
-    /* padding-top: calc(40px(原来的bottom值) + constant(safe-area-inset-top)); */
-
-    /* 适配底部黑条*/
-    padding-bottom constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
-    padding-bottom env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
-
-
-
-//  基础配置
-body 
-  height 100vh
-  width 100vw
-  box-sizing border-box  
-  background-color $background-color 
-  position fixed
-
-  #app
-    height 100%
-    width 100%
-    overflow hidden
-    background-color $background-color
-
-   
-
-.container
-  height 100%
-  width 100%
-  background-color $background-color
-  color: $text-color
-  font-size: 3.74vw
-
-input
-  border: none
-img
-  width 100%
-  height 100%
-
-
-//  按钮相关配置
-button  
-  outline none
-  border 1px solid transparent
-  padding 0
-
-.btn 
-  width 40vw;
-  height 12vw;
-  padding 5px 10px;
-  border-radius 5px;
-  box-shadow 3px 2px 5px rgb(191, 202, 222);
-
-btn-color-create(backcolor, bordcolor, textcolor)
-   background-color backcolor
-   border 1px solid bordcolor
-   color textcolor
-
-.btn_primary
-  btn-color-create(#3d59c0, #3d59c0, #fff) 
-
-.btn_disable
-  btn-color-create(#f4f4f5, #f4f4f5, #bcbec2) 
-
-.btn_plain
-  btn-color-create(#fff, #3d59c0, #3d59c0)
-
-.btn_danger 
-  btn-color-create(#d9001b, #d9001b, #fff)
-
-.btn_success
-  btn-color-create(#07c160, #07c160, #fff)
-.btn_w_auto
-  width auto
-  padding  3.2vw 6.4vw;
-// 按钮相关配置 end
-
-
-
-// vant 样式调整  
-.self_tabs
-  height 100%
-  box-sizing border-box
-  .van-tabs__nav 
-    border 1px solid #E4E7F2;
-    padding 2px;
-    box-sizing border-box;
-    border-radius 5px;
-    margin 0 5px;
-
-    .van-tab--active 
-      background-color #E4E7F2;
-      color #3D59C0;
-      border-radius 5px;
-
-    .van-tabs__line 
-      display none;
-      
-.cell-title
-  :deep(.van-cell__title span::before)
-    display inline-block;
-    height 50%;
-    width 3px;
-    background-color #3D59C0;
-    content "";
-    margin-right 5px;
-  
-
-  :deep(.van-cell__value)
-    color black  
-
-
-#app
-  .van-nav-bar .van-icon
-    color: #333
-  .van-nav-bar__text
-    color: #3d59c0
-
-  .van-tabs--line .van-tabs__wrap 
-    height: 9.733vw;

src/style/theme.styl

-@import "var.styl"
-
-.hips-view__content {
-  -webkit-overflow-scrolling touch
-}
-
-.hips-view__header {
-  .hips-tabs {
-    width 70%
-    margin-left 15%
-
-    .hips-tabs__wrapper {
-      &:after {
-        border-bottom-width 0
-      }
-
-      .hips-tab--active {
-        color $font-color !important
-      }
-    }
-  }
-}
-
-// 平移滑动
-.router-slide-left {
-  &-enter {
-    opacity: .6
-    transform: translate3d(100%, 0, 0)
-  }
-
-  &-leave-to {
-    opacity: .6
-    transform: translate3d(-30%, 0, 0)
-  }
-
-  &-enter-active, &-leave-active {
-    transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1)
-  }
-}
-
-.router-slide-right {
-  &-enter {
-    opacity: 1
-    transform: translate3d(-30%, 0, 0)
-  }
-
-  &-leave-to {
-    opacity: .6
-    transform: translate3d(100%, 0, 0)
-  }
-
-  &-enter-active, &-leave-active {
-    transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1)
-  }
-}
\ No newline at end of file

src/style/var.less

+@background-color: #f7f8fb;
+@text-color: #333;
+@text-gray-color: #AAA;
\ No newline at end of file

src/style/var.styl

-$background-color = #f7f8fb 
-$text-color = #333
-$text-gray-color =#AAA

src/utils/globalFun.js

@@ -4,7 +4,7 @@ const { download, previewOffice, upload } = Files
 const { deviceInfo, copyClipboard } = Device;
 const { captureImage, chooseImage } = Camera;
 import { get, post, put, File } from '@/utils/http'
-let baseUrl = process.env.VUE_APP_HTTP_BASE_URL
+let baseUrl = import.meta.env.VITE_HTTP_BASE_URL
 
 
 // 字典转换成对应格式

src/views/applications.vue

@@ -29,16 +29,15 @@ export default {
       let routers = this.$router.getRoutes() || []
       let modules = {}
 
-      routers = routers.filter((route) => route.meta.title && route.meta.moduleName !== "index")
+      routers = routers
+        .filter((route) => route.meta.title)
+        .forEach(route => {
+          let moduleName = route.path.split('/')[1]
 
-      routers.forEach(route => {
-        let moduleName = route.meta.moduleName
-
-        if (!modules.hasOwnProperty(moduleName)) modules[moduleName] = []
-
-        modules[moduleName].push(route)
-      });
+          if (!modules.hasOwnProperty(moduleName)) modules[moduleName] = []
 
+          modules[moduleName].push(route)
+        });
 
       this.modules = modules
       console.log(this.modules, '==this.modules');
@@ -47,22 +46,29 @@ export default {
 };
 </script>
 
-<style scoped lang="stylus">  
-.container 
-  overflow scroll
-.module
-  background-color #eceff9
-  line-height 5vh
-  color #4762C3
-  border 1px solid #e4e7f2
-  font-size 4vw
-  font-weight 600
-  padding-left 2vw
+<style scoped lang="less">
+.container {
+  overflow: scroll;
+}
+
+.module {
+  background-color: #eceff9;
+  line-height: 5vh;
+  color: #4762C3;
+  border: 1px solid #e4e7f2;
+  font-size: 4vw;
+  font-weight: 600;
+  padding-left: 2vw;
+}
+
+
+.module_content {
+  padding: 10px 20px;
+}
 
-.module_content
-  padding 10px 20px 
 
-.module_item 
-  color gray
-  line-height 4vh  
+.module_item {
+  color: gray;
+  line-height: 4vh;
+}
 </style>

vite.config.js

+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import legacy from '@vitejs/plugin-legacy'
+import Pages from 'vite-plugin-pages'
+import styleImport, { VantResolve } from 'vite-plugin-style-import';
+
+import pxtovw from 'postcss-px-to-viewport'
+const loader_pxtovw = pxtovw({
+  unitToConvert: 'px',
+  viewportWidth: 320,
+  unitPrecision: 5,
+  propList: ['*'],
+  viewportUnit: 'vw',
+  fontViewportUnit: 'vw',
+  selectorBlackList: [],
+  minPixelValue: 1,
+  mediaQuery: false,
+  replace: true,
+  exclude: [],
+  landscape: false,
+  landscapeUnit: 'vw',
+  landscapeWidth: 568
+})
+
+// https://vitejs.dev/config/
+export default {
+  plugins: [
+    vue({ reactivityTransform: true }),
+    Pages({
+      dirs: ['src/views', 'src/modules'],
+      extensions: ['vue'],
+      exclude: ['**/components/*.vue']
+    }),
+    legacy({
+      targets: ['defaults', 'not IE 11']
+    }),
+    styleImport({
+      resolves: [VantResolve()],
+      libs: [{
+        libraryName: 'vant',
+        esModule: false,
+        resolveStyle: (name) => `vant/es/${name}/style/index`
+      }],
+    }),
+  ],
+  css: {
+    postcss: {
+      plugins: [loader_pxtovw]
+    }
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5678
+  }
+}

vue.config.js

-let path = require('path');
-module.exports = {
-  // publicPath: './',
-  publicPath: "",
-  // 不需要生产环境的 source map，将其设置为 false 以加速生产环境构建
-  productionSourceMap: false,
-  transpileDependencies: true,
-  lintOnSave: false,
-  chainWebpack: config => {
-    config.module.rule('compile')
-      .test(/\.js$/)
-      .include
-      .end()
-      .use('babel')
-      .loader('babel-loader')
-      .options({
-        presets: [
-          ['@babel/preset-env', {
-            modules: false
-          }]
-        ]
-      });
-  },
-  css: {
-    loaderOptions: {
-      stylus: {
-        import: [path.resolve(__dirname, "src/style/var.styl")],
-      }
-    }
-  }
-};