vite vue插件打包配置

import { defineConfig, UserConfigExport, ConfigEnv } from "vite";
import externalGlobals from "rollup-plugin-external-globals";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";

const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    target: "esnext",
    outDir: "dist",
    lib: {
      entry: path.resolve(__dirname, "./src/main.ts"),
      name: "myLib", //全局变量的名称
      fileName: "my-lib", //输出文件的名字
    },
    rollupOptions: {
      plugins: [
　　　　 //CDN引入的话，使用这个插件做配置。但是这里引入的文件要是遵循umd格式的，此项只会在打包的文件中使用，未打包状态下的dev模式中不会走这里
        externalGlobals({
          vue: "Vue",
        }),
      ],
    },
  },
  plugins: [
    vue(),
    dts({
      insertTypesEntry: true,
      copyDtsFiles: false,
    }),
  ],
});

 几个CDN的例子：

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" />
    <!-- <script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.10/vue-router.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

vite.config.js:

import { defineConfig } from "vite";
import externalGlobals from "rollup-plugin-external-globals";

import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [
        externalGlobals({
          "vue-router": "VueRouter",
          'vue':'Vue',
          'axios':'axios'
        }),
      ],
    },
  },
});

//其中key就是你引入的时候的名字，value就是引入的那个第三方库的全局变量名字
posted @ 2021-12-18 12:06  洛晨随风  阅读(4910)  评论(0)  编辑  收藏  举报