Vue Cli 3浏览到dist目录

Question

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

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

现在，当我这样做时（例如，浏览到http://localhost:8083/dist/component.js之类的东西），我会看到在公共目录中找到的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作为入口的浏览器选项卡，并将在本地计算机上模拟Web服务器。 docs中有更多可用选项。

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