# 使用Vue-cli3.0创建的项目，如何发布npm包 > 在使用`vue`进行项目开发时，如果我们想要发布一个包，有时候会有点迷糊，不知道应该怎么修改脚手架的默认设置。这里记录一下一些常见的操作。 使用`vue create view-design-ext`创建项目，根据向导指引安装设置。 > 假设我们创建一个项目包含项目组需要的组件，命名为：view-design-ext，现在我们希望将该项目导出为纯npm组件库，需要做以下的修改。 ## 创建index.js进行模块的导出 将我们需要导出的组件在`index.js`文件中进行统一导出，可能之前需要进行处理，是先进行全局注册`Vue.component`，还是用户自己注册。 ~~~ import App from './App.vue' export default App; ~~~ ## 修改vue.config.js配置文件 修改`publicPath`的路径为相对路径 ~~~ module.exports = { lintOnSave: false, runtimeCompiler:true, publicPath: './', } ~~~ ## 修改package.json中的script `vue-cli`默认给我们设置了`build`,但是我们不使用这个`build`，而是打包我们之前创建的`index.js`文件 新增`build-bundle` ~~~ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build-bundle": "vue-cli-service build --target lib --name view-design-ext ./src/index.js", "lint": "vue-cli-service lint" }, ~~~ ## 修改package.json中的main 这里的main是打包后的程序入口，也就是我们通常下载一个包后使用`import xxx from YYY`默认从`node_modules`下查找的文件，因此，我们需要修改为我们打包后的文件名，否则查找不到这个文件。 > 需要再package.json文件中增加一项，默认生成的package.json文件没有这一行 ~~~ "main": "dist/view-design-ext.common.js", ~~~ 这样的话，一个包就修改完成，打包后正常发布就可以使用了。 # 引用的项目需要配置一下才能正常使用 遇到同问题，参考[这篇文章](https://juejin.im/post/5cb97b116fb9a0687b7ddbc9)解决的 问题原因可以去原文看下，我贴下解决方法 ~~~ npm install --save-dev @babel/plugin-transform-modules-umd ~~~ babel.config.js ~~~ module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], plugins: ['@babel/plugin-transform-modules-umd'], //主要是这个 }; ~~~ 这样`umd`包就不用`npm publish`也能在本地实时引入测试了