7.5 moon-web-start学习日记-01

 vite.config.ts

import VueI18n from '@intlify/unplugin-vue-i18n/vite'
import Vue from '@vitejs/plugin-vue'
import path from 'node:path'
import { visualizer } from 'rollup-plugin-visualizer'
import Unocss from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import VueMacros from 'unplugin-vue-macros/vite'
import { defineConfig } from 'vite'
import Pages from 'vite-plugin-pages'

export default defineConfig({
  /**
   * 若使用 Github Pages 进行部署，打包后的资源在 /moon-web-start 下
   * 但默认会请求根目录下的资源 故此处根据 环境变量 REPOSITORY 动态设置 base
   * 相当于： process.env.REPOSITORY ? '/moon-web-start/' : ''
   */
  base: process.env.REPOSITORY ? `/${process.env.REPOSITORY.split('/').pop()}/` : '',
  plugins: [
    Vue(),
    Unocss(), // css原子化
    Pages(),  // 自动生成router
    VueMacros(),  // Vue3先进或者是灰度测试中的功能，都会放到Vue Macros这个插件里去实现 官网vue-macros.dev/zh-CN/
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue/macros'], // 自动引入这些库的api,如ref、computed、useRoute等等
      dts: 'src/auto-imports.d.ts',
      dirs: ['src/composables', 'src/stores'],
      vueTemplate: true,  // 例如，假设你在Vue模板中使用了一个`<router-link>`标签，如果没有启用 vueTemplate: true ，你需要手动导入`import { RouterLink } from 'vue-router'`才能使用它。但是通过启用 vueTemplate: true ，unplugin-auto-import将会自动为你处理这个导入过程，无需额外的手动操作。
    }),
    Components({
      resolvers: [NaiveUiResolver()],
      dirs: ['src/components/**'],
      extensions: ['vue', 'tsx'],
      dts: 'src/components.d.ts',
    }),
    visualizer({
      open: false,
      gzipSize: true,
      brotliSize: true,
    }),
    VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      fullInstall: true,
      include: [path.resolve(__dirname, 'src/locales/**')],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~': path.resolve(__dirname, './'),
    },
  },
  server: {
    port: 1888,
    host: '0.0.0.0',
  },
})