Vue项目打包发布至npm

Posted 2023-04-12

参考技术A

新建一个项目，在根目录创建两个文件夹 packages 和 examples

将原项目中 components 下所有组件复制到新项目的 packages 目录下，如果有字体图标，将字体图标也一并放到 packages 目录下

packages/index.js

main.js

必须在 new Vue() 方法前调用 use 方法注册插件

Vue CLI提供了将Vue项目打包成库的命令，官方文档地址 https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%94%E7%94%A8

package.json

在 package.json 中新增一条打包命令，其中 packages/index.js 指定打包入口文件

默认情况下该命令不会将 Vue 打包进去，因为任何引用我们库的Vue项目都默认包含 Vue ，如果使用文件或者CDN方式引入我们的库，则需要使用者手动引入 Vue 。可以通过添加 --inline-vue 参数来内置 Vue 。 --name 来指定打包后的名字。

运行打包命令

package.json

其中 name 不能在 npm 上已经存在， private 必须设置为 false ，否则发布会失败， main 指定的是 import 我们的库时默认导入的文件

如果包的名字已经被其他人使用了，可以声明所有者信息来避免重名冲突。有两种方式来实现，第一种，手动修改 package.json ，将 name 修改为 @username/package-name 。第二种，推荐在新项目中使用， npm init --scope==username 。这个时候，发布包的命令也要进行修改

.npmignore

定义哪些文件在上传到npm时会被忽略。一般而言， examples 是包含测试的文件， packages 是源码， public 是一些静态文件，这些对库的使用者来说意义不大，可以不上传到npm

如果使用了第三方npm源，必须改回npm官方源

切换回官方源命令为 nrm use npm

登录

发布

取消发布

发布时遇到错误时可能是以下原因导致的:

安装

全局导入

使用组件

21.Vue---npm run build 项目打包文件过大（体积优化）

　　在项目打包完成后，经常会遇到一些文件过大或者一些路径地址不对的问题从而导致项目加载缓慢以及一些图片加载不出来或者一些其他问题的产生。根据自己打包后遇到的一些问题在这里记录一下，以防下次遇到后还的麻烦性的查找，唉??~~~，就是懒，哈哈。

　　（注：本文呢我就写一些遇到的问题和一些解决的方法，具体的实现过程，我想各位应该都查阅过一些博客了，我就附上参考链接吧！??这博主Realy lazy！！！）

一、vender文件过大，或者时app.js文件很大，又或者路径地址不对：

　　1.不常用的库的CDN方式引入。　　参考地址：https://www.cnblogs.com/wjunwei/p/9242142.html

　　2.Router路由的懒加载。　　　　　参考地址：同1

　　3.config/index.js 下的build 中的asstsPublicPath改为‘./‘ 即 assetsPublicPath: ‘./‘,　　　　　　　　　（作用：静态路径的修改，防止打包后路径地址重复或者不对的问题发生。）

　　4.build/utils.js 下的 if (options.extract) 中的 return ExtractTextPlugin.extract({ }) 加一个属性设置 publicPath:‘../../‘ //关键句　　（作用：跟3一起使用，作用一致。）

　　5.config/index.js 下的build 中的productionSourceMap改为false 即 productionSourceMap: false,　　　　　　　　　　　　      （作用：避免生成map文件，打包更快。）

　　6.config/index.js 下的build 中的productionGzip改为true （注：这个压缩方法呢我没使用，但根据看的一些博客都说也是一种优化方式，你们使用时可以查一下该方式的使用方法，还需要下载插件） 

 

二、app.css文件过大：

　　1.build/webpack.base.conf.js 中 修改 url-loader的limit属性。默认是100000，我改成了5000。 （该方法呢尝试了几次修改大小，但是结果文件的优化有限，自己酌情待估吧。）

　　 2.使用extract-text-webpack-plugin插件。 参考链接：https://www.cnblogs.com/dyx-wx/p/6529447.html ；

　　　如果报 webpack Can‘t resolve ‘style-loader‘ 这个错误，则就请大家查看参考链接：https://www.jianshu.com/p/26fd6103e577

　　   （注意：大家在使用这个插件时，打包时在webpck.base.conf.js文件中的 rules 中添加的那个配置对象打开，在本地运行时呢，把这个注释掉，否则本地会报错。参考地址：https://blog.csdn.net/sinat_33312523/article/details/72566004）

 

三、图片过大：

　　1.使用TinyPNG压缩图片，但是图片质量不会有太大影响。 地址：https://tinypng.com/

　　2.使用cdn网站，把图片传上去，使用线上地址。如：腾讯云cdn、阿里云cdn （本人没有使用过这个，只因为需要花钱，心疼。。。 大家要是想使用该方法可以问问公司是否有使用一些相关的cdn）