# 使用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`也能在本地實時引入測試了