Vue-Cli 3 构建项目并发布npm包

前提

• 官网详细文档: https://cli.vuejs.org/zh/guide/installation.html
• node >= 8.9.* (推荐8.11.4)
• 预先卸载之前安装全局的vue-cli

亮点

• 将繁琐webpack配置都写入@vue/cli-service库中
• 快速原型开发，详细看：https://cli.vuejs.org/zh/guide/prototyping.html

疑惑?

1. webpack配置应该在哪里查看

1. webpack配置如何修改

官网给我们提供了在项目根目录下vue.config.js(没有自己创建)进行修改

2.1 修改简单配置

module.exports = {
  configureWebpack: () => {
    return {
      entry: './src/components/index.js',
      output: {
        filename: 'js/test.min.js',
        library: 'testVue',
        libraryTarget: 'umd',
        umdNamedDefine: true
      }
    }
  }
}

2.2 修改高级配置

module.exports = {
  chainWebpack: config => {
    config
      // 插件名 
      .plugin('extract-css')
      // 修改规则
      .tap(args => {
        args[0].filename = 'css/styles.css'
        args[0].chunkFilename = 'css/[name].css'
        return args
      })
  }
}

3.webpack修改的规则名应该在何处看?

创建项目

这边使用图形化界面构建

vue ui

1.采用vue-cli 3之前的方式打包项目，会发生

老方式的打包: https://www.imooc.com/article/19691

// main.js下引入， xxx假设你发布的包
import xxx from 'xxx'

console.log(xxx) // 这里的值等于undefined

// 由于xxx的值是undefined, 而不是 { install: ... }, 将会抛出错误
Vue.use(xxx)

注意：原来vue cli 3给我们提供了新的打包方式。详情请看：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%94%E7%94%A8

那么将如何修改呢？其实变得非常的简单，连webpack都不需要去重新配置

// package.json

这里--name 后面名称一定要跟 - ，不然会报错，也不知道为啥

"scripts": {
"build": "vue-cli-service build --target lib --name ts-vue src/components/index.js"
},