zoukankan      html  css  js  c++  java
  • 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就是引入的那个第三方库的全局变量名字
    积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案
  • 相关阅读:
    OpenStack安装及监控配置视频教程
    具有可视化的功能的一款开源软件Gource
    Ubuntu 12.04使用演示
    VisualRoute for Mac OS 体验
    P1006-传纸条
    Leetcode-1157 Online Majority Element In Subarray(子数组中占绝大多数的元素)
    Leetcode-1156 Swap For Maximum Repeated Substring(单字符重复子串的最大长度)
    Leetcode-1155 Number of Dice Rolls With Target Sum(掷骰子的N种方法)
    Leetcode-1154 Ordinal Number Of Date(一年中的第几天)
    P1508-Likecloud-吃、吃、吃
  • 原文地址:https://www.cnblogs.com/llcdbk/p/15704740.html
Copyright © 2011-2022 走看看