Vue Cli 3 浏览到 dist 目录

Posted 2023-03-15

【中文标题】Vue Cli 3 浏览到 dist 目录

【英文标题】：Vue Cli 3 browse to dist directory

【发布时间】：2019-03-31 07:51:22

【问题描述】：

我有一个 Vue Cli 3 应用程序，它在构建时会在“dist”目录中创建一组 Web 组件。

我正在寻找一种在运行npm run serve 时能够浏览“dist”目录中文件的方法，这将启动 webpack 开发服务器。

当我现在执行此操作时（例如，浏览到 http://localhost:8083/dist/component.js），我只会看到公共目录中的 index.html 文件。

如何通过 vue.config.js 文件配置让 devserver 在“dist”目录中提供文件的能力？

【问题讨论】：

您是否希望将当前的devServer 专门用于为/dist 文件夹提供服务，或者您正在寻找一种方法来提供这些静态文件以浏览您的生产应用程序？

寻找一种方法让我的 devServer 为本地测试提供静态 /dist 文件夹。我们会将 /dist 文件夹部署到实际的 Web 服务器以用于生产目的。

【参考方案1】：

devServer 旨在为开发环境提供配置以应用某些加载器、插件等。您正在寻找一种将本地托管文件作为工作应用程序提供服务的方法。这是两个不同的目的，我不建议为此目的调整 devServer 配置。

有一些简单的方法可以在本地机器上提供静态文件。 最简单的方法之一是使用live-server、serve 或类似名称。

为了让它与live-server一起工作，只需要几个步骤：

1) 安装

npm install -g live-server

2) 在终端导航到静态文件所在的文件夹（例如project-folder/dist/

3) 运行live-server 命令。

这将打开一个以index.html 作为入口点的浏览器选项卡，并将模拟本地计算机上的网络服务器。 docs 提供更多选项。

但这将达到目的，不会干扰devServer 的目的。

【讨论】：

谢谢，我希望有一种方法可以使用 devServer 做到这一点。实际上，我最终创建了自己的 server.js 文件，该文件使用 express 创建了一个 http/https 服务器。

谢谢。我更喜欢实时服务器，因为它有更多的自定义选项。我在“serve”包中找不到“cors”和“proxy”的选项。