vite.config.ts配置之自動導入element-puls方式

更新時間：2023年10月10日 08:52:19 作者：成序猿@

這篇文章主要介紹了vite.config.ts配置之自動導入element-puls方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

自動導入推薦

首先你需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代碼插入到你的 Vite 或 Webpack 的配置文件中

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

這樣配置太過簡單，你會發(fā)現目錄會多出兩個文件，auto-imports.d.ts和components.d.ts。

他們的作用就是不需要開發(fā)者手動導入，你所使用的組件庫和依賴都會在這里看到。

如下components.d.ts文件。

如果只是以上簡單的配置auto-imports.d.ts你會發(fā)現他是一個空文件，所以還需要你加配置，配置如下：

dts配置生成文件的路徑，默認是根路徑。

但是使用默認路徑會存在問題，頁面會報依賴未定義的錯誤，放到src下會解決這一問題。

如果不想放在src下，你可以修改tsconfig文件，

如下配置

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/style/blackTheme.scss"
  ]

因為ts只配置了src下的.d.ts文件，自動生成的文件和sec同級所以報錯，將src/**/*.d.ts改為**/*.d.ts即可

imports配置可以自動引入的依賴，我配置的是vue，vue-router，axios等，配置完成以后，他會將你配置的依賴顯示到auto-imports.d.ts中，

同時設置vueTemplate:true，在頁面使用（ref,reactive）時不在需要引入。

    AutoImport({
      resolvers: [ElementPlusResolver()],
      dts: "src/auto-imports.d.ts",
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      vueTemplate: true,
      imports: [
        "vue",
        "vue-router",
        "vue/macros",
        // custom
        {
          "@vueuse/core": [
            // named imports
            "useMouse", // import { useMouse } from '@vueuse/core',
            // alias
            ["useFetch", "useMyFetch"], // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          axios: [
            // default imports
            ["default", "axios"], // import { default as axios } from 'axios',
          ],
        },
      ],
    }),
    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ["vue", "md"],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.tsx$/, /\.vue\?vue/, /\.md$/],
      resolvers: [ElementPlusResolver()],
      dts: "src/components.d.ts",
    }),

如果你想使用$ref也可以配置好，無需在自己引入了。

$ref定義的變量不需要.value哦

vue({
      include: [/\.vue$/, /\.md$/],
      // 可以使用$ref
      reactivityTransform: true,
    }),

注意：

自動引入會出現一些樣式的丟失，如：ElMessage、ElNotification等，解決方法如下，在vite.config.ts中進行如下配置。

這里會用到vite-plugin-style-import插件，自己下載即可。

 import {
  createStyleImportPlugin,
  ElementPlusResolve,
} from "vite-plugin-style-import";
// 解決message和notification引入不生效問題
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
    }),

想要動態(tài)改變?yōu)g覽器中title，可以使用vite-plugin-html，可以進行title的動態(tài)配置, 然后可以在index.html根目錄下進行渲染了

如下：

createHtmlPlugin({
      inject: {
        data: {
          title: "vite+vue3+ts",
          description: "系統",
          version: "1.0.1",
        },
      },
    }),

<title><%-title%></title>

配置全局的css、less、scss，可以如下配置：我在項目main.ts引入了樣式所以這里注釋了

css: {
    preprocessorOptions: {
      // less: {
      // 全局添加less
      // additionalData: `@import '@/assets/styles/common/var.less';`,
      // javascriptEnabled: true,
      // },
    },
  },

然后就是打包時代碼的一些配置了。

配置去除console.log、debugger以及注釋等。

 /** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */
    minify: "terser",
    /** 在打包代碼時移除 console.log、debugger 和 注釋 */
    terserOptions: {
      //打包后移除console和注釋
      compress: {
        drop_console: false,
        drop_debugger: true,
        pure_funcs: ["console.log"],
      },
      format: {
        /** 刪除注釋 */
        comments: false,
      },
    },