build: 处理vite.config.ts

2023-12-21 17:30:49 +08:00 · 2023-12-21 17:30:49 +08:00 · a87775137c
commit a87775137c
parent a1eecdeb38
7 changed files with 3628 additions and 14 deletions
--- a/index.html
+++ b/index.html
@ -1,13 +1,17 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html build-date="%BUILD_DATE%">
  <head>
    <meta charset="UTF-8" />
    <script>
-      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
-        CSS.supports('top: constant(a)'))
+      var coverSupport =
+        'CSS' in window &&
+        typeof CSS.supports === 'function' &&
+        (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
-        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+          (coverSupport ? ', viewport-fit=cover' : '') +
+          '" />',
+      )
    </script>
    <title></title>
    <!--preload-links-->
--- a/package.json
+++ b/package.json
@ -65,6 +65,7 @@
    "@dcloudio/uni-mp-toutiao": "3.0.0-3081220230817001",
    "@dcloudio/uni-mp-weixin": "3.0.0-3081220230817001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-3081220230817001",
+    "dayjs": "^1.11.10",
    "vue": "3.2.47",
    "vue-i18n": "^9.1.9"
  },
@ -80,6 +81,7 @@
    "@typescript-eslint/parser": "^6.15.0",
    "@vue/runtime-core": "^3.2.45",
    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.16",
    "commitlint": "^18.4.3",
    "eslint": "^8.56.0",
    "eslint-config-airbnb-base": "^15.0.0",
@ -93,6 +95,7 @@
    "postcss": "^8.4.32",
    "postcss-html": "^1.5.0",
    "postcss-scss": "^4.0.9",
+    "rollup-plugin-visualizer": "^5.11.0",
    "sass": "^1.69.5",
    "stylelint": "^16.0.2",
    "stylelint-config-html": "^1.1.0",
@ -101,7 +104,16 @@
    "stylelint-config-standard": "^35.0.0",
    "stylelint-config-standard-scss": "^12.0.0",
    "typescript": "^4.9.4",
+    "unocss": "^0.58.0",
+    "unplugin-auto-import": "^0.17.2",
+    "unplugin-vue-components": "^0.26.0",
    "vite": "4.1.4",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-restart": "^0.4.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vite-svg-loader": "^5.1.0",
    "vue-global-api": "^0.4.1",
    "vue-tsc": "^1.0.24"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/auto-import.d.ts
+++ b/src/auto-import.d.ts
@ -0,0 +1,78 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: (typeof import('vue'))['EffectScope']
+  const computed: (typeof import('vue'))['computed']
+  const createApp: (typeof import('vue'))['createApp']
+  const customRef: (typeof import('vue'))['customRef']
+  const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent']
+  const defineComponent: (typeof import('vue'))['defineComponent']
+  const effectScope: (typeof import('vue'))['effectScope']
+  const getCurrentInstance: (typeof import('vue'))['getCurrentInstance']
+  const getCurrentScope: (typeof import('vue'))['getCurrentScope']
+  const h: (typeof import('vue'))['h']
+  const inject: (typeof import('vue'))['inject']
+  const isProxy: (typeof import('vue'))['isProxy']
+  const isReactive: (typeof import('vue'))['isReactive']
+  const isReadonly: (typeof import('vue'))['isReadonly']
+  const isRef: (typeof import('vue'))['isRef']
+  const markRaw: (typeof import('vue'))['markRaw']
+  const nextTick: (typeof import('vue'))['nextTick']
+  const onActivated: (typeof import('vue'))['onActivated']
+  const onBeforeMount: (typeof import('vue'))['onBeforeMount']
+  const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount']
+  const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate']
+  const onDeactivated: (typeof import('vue'))['onDeactivated']
+  const onErrorCaptured: (typeof import('vue'))['onErrorCaptured']
+  const onMounted: (typeof import('vue'))['onMounted']
+  const onRenderTracked: (typeof import('vue'))['onRenderTracked']
+  const onRenderTriggered: (typeof import('vue'))['onRenderTriggered']
+  const onScopeDispose: (typeof import('vue'))['onScopeDispose']
+  const onServerPrefetch: (typeof import('vue'))['onServerPrefetch']
+  const onUnmounted: (typeof import('vue'))['onUnmounted']
+  const onUpdated: (typeof import('vue'))['onUpdated']
+  const provide: (typeof import('vue'))['provide']
+  const reactive: (typeof import('vue'))['reactive']
+  const readonly: (typeof import('vue'))['readonly']
+  const ref: (typeof import('vue'))['ref']
+  const resolveComponent: (typeof import('vue'))['resolveComponent']
+  const shallowReactive: (typeof import('vue'))['shallowReactive']
+  const shallowReadonly: (typeof import('vue'))['shallowReadonly']
+  const shallowRef: (typeof import('vue'))['shallowRef']
+  const toRaw: (typeof import('vue'))['toRaw']
+  const toRef: (typeof import('vue'))['toRef']
+  const toRefs: (typeof import('vue'))['toRefs']
+  const toValue: (typeof import('vue'))['toValue']
+  const triggerRef: (typeof import('vue'))['triggerRef']
+  const unref: (typeof import('vue'))['unref']
+  const useAttrs: (typeof import('vue'))['useAttrs']
+  const useCssModule: (typeof import('vue'))['useCssModule']
+  const useCssVars: (typeof import('vue'))['useCssVars']
+  const useSlots: (typeof import('vue'))['useSlots']
+  const watch: (typeof import('vue'))['watch']
+  const watchEffect: (typeof import('vue'))['watchEffect']
+  const watchPostEffect: (typeof import('vue'))['watchPostEffect']
+  const watchSyncEffect: (typeof import('vue'))['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type {
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    ExtractDefaultPropTypes,
+    ExtractPropTypes,
+    ExtractPublicPropTypes,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+    WritableComputedRef,
+  } from 'vue'
+  import('vue')
+}
--- a/src/components.d.ts
+++ b/src/components.d.ts
@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: (typeof import('vue-router'))['RouterLink']
+    RouterView: (typeof import('vue-router'))['RouterView']
+  }
+}
--- a/uno.config.ts
+++ b/uno.config.ts
@ -0,0 +1,31 @@
+// uno.config.ts
+import {
+  defineConfig,
+  presetAttributify,
+  presetUno,
+  presetIcons,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    // 支持css class属性化，eg: `<button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white">attributify Button</button>`
+    presetAttributify(),
+    // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+      extraProperties: {
+        display: 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
+  transformers: [
+    transformerDirectives(),
+    // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
+    transformerVariantGroup(),
+  ],
+})
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,7 +1,143 @@
-import { defineConfig } from "vite";
-import uni from "@dcloudio/vite-plugin-uni";
+import path from 'node:path'
+import { defineConfig, loadEnv } from 'vite'
+import uni from '@dcloudio/vite-plugin-uni'
+import dayjs from 'dayjs'
+import svgLoader from 'vite-svg-loader'
+import { visualizer } from 'rollup-plugin-visualizer'
+import ViteRestart from 'vite-plugin-restart'
+import Components from 'unplugin-vue-components/vite'
+// ElementPlusResolver,
+// AntDesignVueResolver,
+// VantResolver,
+// HeadlessUiResolver,
+// ElementUiResolver
+import {} from 'unplugin-vue-components/resolvers'
+import AutoImport from 'unplugin-auto-import/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import viteCompression from 'vite-plugin-compression'
+import viteImagemin from 'vite-plugin-imagemin'
+import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+import UnoCSS from 'unocss/vite'
+import autoprefixer from 'autoprefixer'
+
+const htmlPlugin = () => {
+  return {
+    name: 'html-transform',
+    transformIndexHtml(html) {
+      return html.replace('%BUILD_DATE%', dayjs().format('YYYY-MM-DD HH:mm:ss'))
+    },
+  }
+}

 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [uni()],
-});
+export default ({ mode }) => {
+  // mode: 区分生产环境还是开发环境
+  // process.cwd(): 获取当前文件的目录跟地址
+  // loadEnv(): 返回当前环境env文件中额外定义的变量
+  const env = loadEnv(mode, path.resolve(process.cwd(), 'env'))
+  console.log(env)
+  return defineConfig({
+    plugins: [
+      uni(),
+      UnoCSS(),
+      htmlPlugin(),
+      svgLoader(),
+      // 打包分析插件
+      visualizer(),
+      ViteRestart({
+        // 通过这个插件，在修改vite.config.js文件则不需要重新运行也生效配置
+        restart: ['vite.config.js'],
+      }),
+      vueSetupExtend(),
+      // 原先引用组件的时候需要在目标文件里面import相关组件，现在就可以直接使用无需在目标文件import了
+      Components({
+        dirs: ['src/components'], // 目标文件夹
+        extensions: ['vue'], // 文件类型
+        dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对
+        // ui库解析器，也可以自定义，需要安装相关UI库
+        resolvers: [
+          // VantResolver(),
+          // ElementPlusResolver(),
+          // AntDesignVueResolver(),
+          // HeadlessUiResolver(),
+          // ElementUiResolver()
+        ],
+      }),
+      AutoImport({
+        imports: ['vue'],
+        dts: 'src/auto-import.d.ts',
+      }),
+      createSvgIconsPlugin({
+        // 指定要缓存的文件夹
+        iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
+        // 指定symbolId格式
+        symbolId: 'icon-[dir]-[name]',
+      }),
+      viteCompression(), // 会多出一些.gz文件，如xxx.js.gz，这里默认是不会删除xxx.js文件的，如果想删除也可以增加配置
+      // 这个图片压缩插件比较耗时，希望仅在生产环境使用
+      viteImagemin({
+        gifsicle: {
+          // gif图片压缩
+          optimizationLevel: 3, // 选择1到3之间的优化级别
+          interlaced: false, // 隔行扫描gif进行渐进式渲染
+          // colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。
+        },
+        optipng: {
+          // png
+          optimizationLevel: 7, // 选择0到7之间的优化级别
+        },
+        mozjpeg: {
+          // jpeg
+          quality: 20, // 压缩质量，范围从0(最差)到100(最佳)。
+        },
+        pngquant: {
+          // png
+          quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
+          speed: 4, // 压缩速度，1(强力)到11(最快)
+        },
+        svgo: {
+          // svg压缩
+          plugins: [
+            {
+              name: 'removeViewBox',
+            },
+            {
+              name: 'removeEmptyAttrs',
+              active: false,
+            },
+          ],
+        },
+      }),
+    ],
+    css: {
+      postcss: {
+        plugins: [
+          autoprefixer({
+            // 指定目标浏览器
+            overrideBrowserslist: ['> 1%', 'last 2 versions'],
+          }),
+        ],
+      },
+    },
+
+    resolve: {
+      alias: {
+        '@': path.join(process.cwd(), './src'),
+      },
+    },
+    server: {
+      host: '0.0.0.0',
+      hmr: true,
+      port: 7001,
+      // 自定义代理规则
+      proxy: {
+        // 选项写法
+        '/api': {
+          target: 'http://localhost:6666',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+      },
+    },
+  })
+}