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就是引入的那个第三方库的全局变量名字

原因就是默认的打包入口根目录的index.html删除了。这时候就需要对vite.config.ts进行配置了：

build: { // 打包设置

    // Template for index.html 入口配置

    rollupOptions:{

      // 原因就是默认的打包入口 根目录的index.html删除了。这时候就需要对vite.config.ts进行配置了：

      input: 'src/pages/default/index.html'

    },

    minify: 'terser', // 必须启用：terserOptions配置才会有效

    terserOptions: {

      compress: {

        // 生产环境时移除console.log调试代码

        drop_console:true,

        drop_debugger: true,

      }

    }

  },

巴特西

vite vue插件打包配置

最新文章

热门文章