vue 资源: vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js

SSR 框架： Ream - A Vue 3 framework for building amazing apps

import.meta

类型声明：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

interface ImportMeta {
  url: string

  readonly hot?: {
    readonly data: any

    accept(): void
    accept(cb: (mod: any) => void): void
    accept(dep: string, cb: (mod: any) => void): void
    accept(deps: readonly string[], cb: (mods: any[]) => void): void

    /**
     * @deprecated
     */
    acceptDeps(): never

    dispose(cb: (data: any) => void): void
    decline(): void
    invalidate(): void

    on(event: string, cb: (...args: any[]) => void): void
  }

  readonly env: ImportMetaEnv

  glob(
    pattern: string
  ): Record<
    string,
    () => Promise<{
      [key: string]: any
    }>
  >

  globEager(
    pattern: string
  ): Record<
    string,
    {
      [key: string]: any
    }
  >
}
interface ImportMetaEnv {
  [key: string]: string | boolean | undefined
  BASE_URL: string
  MODE: string
  DEV: boolean
  PROD: boolean
}

实际项目输出结果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// import.meta
import.meta.env = {
  url: "https://localhost:3000/src/main.ts",
  env: {
    BASE_URL: "/",
    MODE: "development",
    DEV: true,
    PROD: false,
    SSR: false,
  },
};

问题列表

  1. vite create-app 之后启动项目，在 import 的时候总提示文件不存在？

    1. 修改 vite.config.js 增加配置项 optimizeDeps -> exclude -> ['jsuites']:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    exclude: ["jsuites"],
  },
});

  2. 可用的 vue3 ui 库？

    Vue 3 UI component library for 2021 - DEV Community

    ElementUI ✅ > Ionic 移动端 ✅ > Primevue ✅ > Vuetify ❌ > Quasar ❌

  3. import bgImg from '../assets/bg.jpg' 总是报错？

    9:21:21 PM [vite] Internal server error: Failed to resolve import "/@/assets/login_bg.jpg". Does the file exist?

    见 plugin-import-analysis 分析。