vue.js - Vue Cli 3 浏览到 dist 目录

Question

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

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

当我现在执行此操作时(例如，浏览到 http://localhost:8083/dist/component.js 之类的东西)，我只会看到在公共(public)目录中找到的 index.html 文件。

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

Answer 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目的。