vue-cli构建库

使用vue-cli-service build对开发的库进行打包时使用--target lib

开发时Vue通常是以devDependencies方式引入的只在开发中使用, 使用lib方式打包也一样不会把Vue打包进去

官方文档中描述

在库模式中,Vue 是外置的。这意味着包中不会有 Vue,即便你在代码中导入了 Vue。

打包

打包时通常会提示缺少vue-template-compiler 按以下安装并打包, 打包默认输出路径是./dist

1
2
3
4
npm install -g @vue/cli-service
npm install -g vue-template-compiler

vue-cli-service build --target lib --name myLib [entry]

配置

vue.config.js中进行打包相关的配置

1
2
3
4
5
6
7
8
module.exports = {
//不生成 .map 文件
productionSourceMap: false,
css: {
//css合并入js中, 实际使用中发现合并的时候会自动去掉空的class, 导致$style.class 取不到值
extract: false
}
}

引入

发布到npm上后, 若需要CDN方式引入, 可以使用unpkg 例如这个项目
https://github.com/GitHub-Laziji/menujs

1
<script src="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">

 欢迎关注我的博客公众号
如果觉得我的文章对你有用,请随意赞赏
0%