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感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
随机推荐
- Mybatis学习笔记【狂神说】
环境 Jdk 1.8 Mysql 5.7 Maven 3.6.1 IDEA 回顾 JDBC Mysql java基础 Maven Junit SSM框架:都是有配置文件的.最好的学习方式:看官方文档. ...
- redis 单节点迁移到集群 redis-shake
1.迁移 1.1.同步到单节点 redis-shake下载 release-v2.1.2-20220329.tar.gz #redis cluster 某一个节点 服务器安装redis-shak ...
- centos8下安装gcc11
最近的云服务器使用的centos8,c以前编译器对c++20的新特性支持的较少,当前最新版的gcc对c++20的支持还是可以的,于是准备体验一下,首要就是升级gcc gcc官网:https://gcc ...
- 如何实现chrome谷歌浏览器多开(独立环境 独立cookie)、改任务栏图标
多开谷歌浏览器: 由于各种各样的原因,你可能需要在一个电脑登录某个平台,比如一个电脑登录3个公众号,或者3个知乎等等. 最简单的方案是,直接安装3个不同的浏览器,比如一个谷歌浏览器,一个火狐浏览器,一 ...
- jenkins-构建触发器之定时构建和轮询 SCM
前言 最近搭建自动化框架,跑自动化用例每次都得用手工点击构建任务,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行 定时构建语法 五颗星,中间用空格隔开 * * * * * 第一颗*表 ...
- 题解 UVA10859 【Placing Lampposts】
交了N次,重构一次代码终于过了..... 题意:一片森林,1.输出占领所有边需要的最小的路灯个数 2.输出两端点均被占领的边的条数 3.只有一端被占领的边的条数 还是比较简单的 开始的时候思路不够清晰 ...
- TCAM and CAM memory usage inside networking devices（转）
TCAM and CAM memory usage inside networking devices Valter Popeskic Equipment and tools, Physical la ...
- notepad++解决粘贴复制代码行数问题
一.打开 Notepad++,按住 Alt,鼠标点击拖出选择框,这个是列选方法.如图: 然后删除即可 二. 1.将带行数的代码粘贴复制到notepad++中: 2.按ctrl+f,选中替换,选中正则表 ...
- nodejs查询
const tagModel = require("../mongodb"); 1 const mongoose = require("mongoose"); ...
- vba_pj_0001_auto_date
Const init_info As String = "InitInfo"Const end_row_op As Integer = 100 'tmpConst end_row ...