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就是引入的那个第三方库的全局变量名字
    积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案
  • 相关阅读:
    Python教程:从零到大师
    Hive 安装 & Mysql 安装
    Hive基本原理及配置Mysql作为Hive的默认数据库
    分布式存储系统-HDFS
    centos 6.4-linux环境配置,安装hadoop-1.1.2(hadoop伪分布环境配置)
    VirtualBox安装Centos出现E_FAIL (0x80004005)的解决方法
    Hadoop 中HDFS、MapReduce体系结构
    探索性测试及基本用例
    软件测试相关术语(测试策略 && 测试方案 ....)
    高效学习的疑问与思路[软技能]
  • 原文地址:https://www.cnblogs.com/llcdbk/p/15704740.html
Copyright © 2011-2022 走看看