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

前端知识

vite vue插件打包配置

相关

前端知识点回顾

大家一起来突击下前端知识的盲区（1）

【重构前端知识体系之HTML】HTML5给网页音频带来的变化

前端知识扫盲VUE知识篇二（vue-roture知识）

标签