• 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就是引入的那个第三方库的全局变量名字
    积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案
  • 相关阅读:
    数据库
    知道版本对于出0day后批量攻击dedecms有非常大的帮助,先判断版本再选择相应exp,效率大增
    跟我开发NSP(网上查询平台):如何选择开发项目
    Python3基础教程(十七)—— Virtualenv
    Python3基础教程(十六)—— 迭代器、生成器、装饰器
    Python3基础教程(十五)—— PEP8 代码风格指南
    Python3简明教程(十四)—— Collections模块
    Python3简明教程(十二)—— 模块
    Python3简明教程(十一)—— 类
    Python3简明教程(十)—— 异常
  • 原文地址:https://www.cnblogs.com/llcdbk/p/15704740.html
Copyright © 2020-2023  润新知