Vue Cli 3 浏览到 dist 目录

Vue Cli 3 browse to dist directory

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

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

当我现在这样做时(即浏览到 http://localhost:8083/dist/component.js 之类的东西),我只看到在 public 目录中找到的 index.html 文件。

如何通过 vue.config.js 文件配置让开发服务器提供 "dist" 目录中的文件的能力?

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

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

为了让它与 live-server 一起工作,只需几个步骤:

1) 安装

npm install -g live-server

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

3) 运行 live-server 命令。

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

中还有更多选项可用

不过这样就达到目的了,不会影响devServer目的。