Vue Cli 3浏览到dist目录

Question

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

我正在寻找一种方法，可以在运行启动webpack dev服务器的npm run serve时浏览“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的目的。