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插件打包配置的更多相关文章
- vue项目打包配置多个测试环境与生产环境，用npm命令打出不同的资源包。
1.找到package.json文件,找到script节点.再新增一个新的脚本命令 test 2.修改prod.env.js配置文件,npm_lifecycle_event代表返回当前执行的脚本名称, ...
- Vue插件配置和 后台交互
Vue插件配置和 后台交互 一.全局配置静态文件(csss, js..) 1.1 全局配置css文件 创建css文件 在main.js配置css文件 // 配置全局css样式 // 方式一 impor ...
- vue 动态ip配置,避免重复打包
目前比较流行的打包大都是在vue.config.js配置代理,然后在根目录新建.env.xxx文件配置正式环境,测试环境,开发环境等用于打包时配置不同的访问地址,作为一名随波逐流的前端开发,我也是这么 ...
- webstrom11 vue插件配置
直接上图 1. 安装vue插件 2.添加模板 3.指定模板类型 最新的是插件 是 vue.js 创建完 Vue File 文件后 需要在 下面这里关联一下
- vue-cli+webpack打包配置
vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
- 第一个Vue插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...
- 手把手教你写vue插件并发布（二）
前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...
- VUE 多页面配置(二)
1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建 ...
- 如何为你的 Vue 项目添加配置 Stylelint
如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
随机推荐
- Python语言基础实验(第四周)
Python语言基础实验(第四周) 一.实验目的 1.了解并掌握python中序列及序列的常用操作. 2.根据实际需要运用合适的序列类型来完成实验. 二.实验环境 软件版本:Python 3.10 6 ...
- 安装centos，ubuntu系统
安装centos系统 1.首先进入VMware,新建虚拟机,选择典型,然后下一步 2.稍后安装系统,下一步 3.因为此次安装的是centos7.9系统,因此版本选择7 64位,下一步 4.选择虚拟机的 ...
- CF14D题解
CF14D Two Paths题解 题目链接 传送门 题意简述 给定一棵树,找出两条不经过相同点的最长路径,使得他们的长度乘积最大. 题目分析 首先,如果在一棵树上,两条路径没有共同的点,那么这两条路 ...
- 在springboot使用jsp
在springboot配置jsp环境 在pom.xml中添加配置依赖 内容如下: <dependency> <groupId>org.springframework.boot& ...
- react项目--路由封装
import React, { lazy } from "react"; import Home from "../views/Home"; import Lo ...
- boost asio 网络编程案例简单改写
boost教程:http://zh.highscore.de/cpp/boost/ 改写7.4网络编程案例,服务器支持连接多个客户端 服务端: #include <iostream> #i ...
- centos7本地yum配置和使用
1.打开centos的yum文件夹 输入命令cd /etc/yum.repos.d/ 2.用wget下载repo文件 输入命令wget http://mirrors.aliyun.com/repo ...
- beanshell 响应数据的解析与变量的保存
获取响应的数据 response = prev.getResponseDataAsString() //prev.getResponseDataAsString是Jmeter提供的方法,可以调取上次请 ...
- 性能测试-dstat以及sar（网络相关数据查看）
1.dstat参数说明 # 安装 yum install dstat -y dstat命令不加任何参数时,会收集CPU.磁盘.网络.分页.系统的数据信息,每秒收集一次.缺省参数时相当于dstat -c ...
- 2022强网拟态 WHOYOUARE
2022强网拟态 WHOYOUARE 先说一下这个思路 由于禁用了__proto__所以我们可以通过constructor.prototype来绕过 之前一直不明白为什么是这样绕过的后来仔细研究了一下 ...