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插件打包配置的更多相关文章

  1. vue项目打包配置多个测试环境与生产环境，用npm命令打出不同的资源包。

    1.找到package.json文件,找到script节点.再新增一个新的脚本命令 test 2.修改prod.env.js配置文件,npm_lifecycle_event代表返回当前执行的脚本名称, ...

  2. Vue插件配置和 后台交互

    Vue插件配置和 后台交互 一.全局配置静态文件(csss, js..) 1.1 全局配置css文件 创建css文件 在main.js配置css文件 // 配置全局css样式 // 方式一 impor ...

  3. vue 动态ip配置,避免重复打包

    目前比较流行的打包大都是在vue.config.js配置代理,然后在根目录新建.env.xxx文件配置正式环境,测试环境,开发环境等用于打包时配置不同的访问地址,作为一名随波逐流的前端开发,我也是这么 ...

  4. webstrom11 vue插件配置

    直接上图 1. 安装vue插件 2.添加模板 3.指定模板类型 最新的是插件 是 vue.js 创建完 Vue File 文件后 需要在 下面这里关联一下

  5. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  6. 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...

  7. 手把手教你写vue插件并发布（二）

    前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...

  8. VUE 多页面配置(二)

    1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建 ...

  9. 如何为你的 Vue 项目添加配置 Stylelint

    如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...

  10. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

随机推荐

  1. JS 开始时间/结束时间和当前时间进行比较

    项目需求:到截止日期一些功能不可以再使用,那么需要判断当前时间与截止时间进行比较,记录一下吧 注意: 1.橙色字体的代码换成你自己的变量 2. .valueOf()其实就是将中国时间转为时间戳 3.截 ...

  2. 复习第一点-1.跑通一个helloworld

    创建项目 导入需要的jar包 对编译出现的jar包处理 整理项目架构 编写配置文件中的内容 web.xml <?xml version="1.0" encoding=&quo ...

  3. 四、流程控制、break、continue、return

    一. 程序流程控制概述 流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块. 流程控制方式采用结构化程序设计中规定的只有三种基本流程结构,即:1.顺序结构程序 ...

  4. Centos 7.9 基于二进制文件部署kubernetes v1.25.5集群

    简述 Kubernetes(简称为:k8s)是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器 ...

  5. mysql报错This function has none of DETERMINISTIC. NO SOL or READS SOL DATA...

    是因为 存储过程/存储函数在创建时 与 开启慢查询日志冲突了 解决冲突: 临时解决:开启log_bin_trust_function_creators show variables like '%lo ...

  6. vue table表格form表单校验输入内容，elment ui table内容校验 form表单input验证

    //html 部分<el-form :model="formObj" :rules="rules"> <el-table :data=&quo ...

  7. .NET Core读写InfluxDB时序数据库的方法教程

    前言 在我们很多应用中会遇到有一种基于一系列时间的数据需要处理,通过时间的顺序可以将这些数据点连成线,再通过数据统计后可以做成多纬度的报表,也可通过机器学习来实现数据的预测告警.而时序数据库就是用于存 ...

  8. gradle的配置

    第一次接触公司的JAVA项目,使用了gradle,于是乎到网上搜索一番,终于弄明白了是个什么东东,由于之前也没有接触过maven和ant,所以对这个东西还是很陌生.好了,废话不多说,开始我的环境搭建. ...

  9. 如何用premiere添加配乐？pr视频添加音乐

    在pr中,怎么给视频添加音乐? 给视频添加音乐,有两种情况:1是视频音乐已存在:2是视频没有音乐,只是单纯的视频. 1.从酷狗音乐里下载一首音乐到桌面. 2.将音乐文件直接拖动到音频轨道里,把素材面板 ...

  10. swift中的进制转换，以及玩转二进制

    swift中的进制转换,以及玩转二进制 在日常开发中我们很少用到进制转换,或操作二进制的情况.但是如果你处理一些底层的代码,你会经常与二进制打交道,所以接下来我们先来了解一下二进制. 二进制(bina ...