• 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就是引入的那个第三方库的全局变量名字
    积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案
  • 相关阅读:
    程序多开原理记录
    BitTorrent协议规范(BitTorrent Protocol Specification)之Tracker HTTP/HTTPS Protocol第三部分
    到底什么是RBD?
    关于missing unit proxies.pas
    教你简单去除 Office 2007 盗版提示
    手把手教你使用WINDBG KO XXXX游戏驱动保护
    c# 模拟提交有附件表单(转)
    常用断点(OD中)
    delphi中Webbrowser
    PS3简易蓝光规格视频制作说明
  • 原文地址:https://www.cnblogs.com/llcdbk/p/15704740.html
Copyright © 2020-2023  润新知