vue编译打包

Posted 2023-05-11

参考技术A 首先找到我们的vue项目文件夹下打开终端

输入我们的第一个命令

npm run build

编译完成后全局全装server

npm install -g serve

安装完成后运行一下编译后的项目

serve dist

然后给了我们一个地址打开就是编译后的项目

然后我们的项目多了一个文件夹dist里面有一个index.html文件就是我们编译后的文件

Vue组件库，无需打包支持包或编译scss文件

【中文标题】Vue组件库，无需打包支持包或编译scss文件

【英文标题】：Vue component library without packing the supporting packages or compiling scss files

【发布时间】：2020-10-06 17:15:41

【问题描述】：

我的任务是弄清楚如何发布我的团队正在开发的组件库。这些组件将被公司内部的各种内部应用程序使用。我有以下限制：

该库将作为 npm 包从内部本地使用 存储库。 （这部分我已经想通了） 组件应该是 使用 typescript 接口 (*.d.ts) 引用编译为 JavaScript 包内。 不应使用第三方包（包括 Vue） 被捆绑进来。相反，最好有依赖的 npm 添加组件时和 npm i 之后添加到项目的包。 编译后的 css 包应该包含在包中，但是 需要时应在项目中单独引用。 构成组件样式的原始 scss 文件应为 包含在包中，因此它们可以捆绑到项目的 构建期间的现有 scss。

我已经查看了 vue-cli-service build --target lib 来完成此操作，但它似乎将所有内容打包并打包。

我问的可能吗？它是反模式吗？有替代品吗？我不知道从哪里开始。

【参考方案1】：

vue-cli-service build --target lib 的方向是正确的，这正是您所需要的。它将您的条目.vue 文件捆绑为一个组件，然后此捆绑包成为您的package.json 的入口点。它不包含 Vue 库（文档中对此进行了说明），我认为默认情况下它在 dist 文件夹中的单独文件中配置为 extract the CSS。 我希望这会有所帮助。

【讨论】：

尼古拉，感谢您的回复！ --target-lib 不也捆绑依赖的 npm 包吗？

是的，确实如此，dependencies 中的所有已安装包都是内部依赖项，它会从中提取（treeshakes）所需的代码，然后将其添加到最终包中。也许 Webpack 可以配置为将某些依赖项视为外部依赖项。

无赖。这与我想要的相反:(我需要将我的打字稿编写成 javascript 而不包括依赖库。相反，我想引用部署包附带的 package.json 文件中的依赖项。

看看这个答案，我还没有尝试过，但它似乎是我们需要的 -> ***.com/questions/51571579/… 我的一些组件也需要这样的东西。

这已被取消优先级，因此我无法在下一个 sprint 之前继续使用它。预计几周后会收到我的来信。