简单的.vue文件npm打包，上传

1. vue-cli脚手架

---

1.1 打包成一个js

将css和js打包成 一个js文件，方便用户引入，这里需要在vue.config.js中配置一下

css: { extract: false },

css.extract
Type: boolean | Object
Default: 生产环境下是 true，开发环境下是 false
是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。
当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。
提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取

1.2 对外暴露default属性

configureWebpack: {
    output: {
      libraryExport: 'default' // 就可以直接调用default里的属性
    }
  }

2. 配置package.json中的scripts

---

"build:lib": "vue-cli-service build --target lib --name xxxxxx ./lib/index.js --dest ./dist/",
"release": "standard-version",
"pub": "npm run build:lib && npm run release &&  npm publish --registry http://xxxxxx/" 

用法：vue-cli-service build [options] [entry|pattern]
选项：
–mode 指定环境模式 (默认值：production)
–dest 指定输出目录 (默认值：dist)
–modern 面向现代浏览器带自动回退地构建应用
–target app | lib | wc | wc-async (默认值：app)
–name 库或 Web Components 模式下的名字 (默认值：package.json 中的 “name” 字段或入口文件名) + 入口文件路径
–no-clean 在构建项目之前不清除目标目录
–report 生成 report.html 以帮助分析包内容
–report-json 生成 report.json 以帮助分析包内容
–watch 监听文件变化

本文地址：https://blog.csdn.net/qq_40202869/article/details/109235712