vue组件上传到npm

打包上传组件

注册组件(index.js)

在任意位置创建 index.js 作为编译入口

每个组件必须有name属性

/** 引入组件 */
import com1 from "./com1.vue";
import com2 from "./com2.vue";

const coms=[com1,com2];
const install=function(Vue){
    coms.forEach(com=>{
        Vue.components(com.name,com)
    })
}
export default install;

编译配置(package.json)

1. 进入项目的package.json，解除私有化并配置编译

   {
       "private":false,//解除私有化
       "scripts":{
           "package":"vue-cli-service build --target lib --name file_name --dest lib_files_name src/index.js"
       }
   }
   

   --name 文件名，--dest 文件夹名，--target lib 编译入口

2. 执行编译： npm run package

3. 转到编译生成的文件夹：cd lib_files_name

4. 初始化，生成package.json：npm init -y

5. 打开生成的package.json，更新版本号

   {
   	"name":"pulgin_name",//插件名称
       "version":"1.0.0",//版本号
   }
   

   版本号必须与上次上传的高

上传到npm

1. 检查源：npm config get registry

2. 切换源

   npm config set registry https://registry.npmjs.org
   

   切换官方源才能上传

   ± 切回淘宝源（后续若需要）

   npm config set registry https://registry.npm.taobao.org
   

3. 登录：npm login

   输入账号+密码，输入密码时不会显示在屏幕上。若没有账号先到npm官网注册一个

4. 上传：npm publish

• 查看登录用户：npm who am i

后续上传

问题解决方案

部分图片消失

图片过大

只显示文件比较小的图片，较大图片未能被编译成base64

• vue.config.js

  若不存在该文件则在根目录创建

  module.exports={
  	chainWebpack: (config) => {
      config.module
        .rule("images")
        .use("url-loader")
        .loader("url-loader")
        .tap((options) => Object.assign(options, { limit: 100000 }));
    },
  }
  

  其中limit:为图片限制大小，将其调大即可调整最大编译图片大小。

字体不生效

全局注册

由于编译时只打包了组件，全局注册的文件未能加入打包。

• 在编译入口文件(index.js)中加入

  import "./main.js"
  

• 或单独引入字体文件

  import "./src/assets/font/fonts.css"