Vue Cli 3 浏览到 dist 目录答案

【问题标题】：Vue Cli 3 browse to dist directoryVue Cli 3 浏览到 dist 目录
【发布时间】：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”目录中提供文件的能力？

【问题讨论】：

【解决方案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”的选项。