Vue Cli 3 浏览到 dist 目录。

Question

4

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

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

现在当我这样做（即类似于浏览http://localhost:8083/dist/component.js），我只会看到public目录中的index.html文件。

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

- xspydr

你是想让你当前的 devServer 专门服务于 /dist 文件夹，还是在生产应用程序中寻找一种将这些静态文件提供给浏览器的方法？ - aBiscuit

寻找一种方法，让我的devServer为本地测试提供静态/dist文件夹。我们将把/dist文件夹部署到实际的Web服务器上以用于生产目的。 - xspydr

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aBiscuit · Accepted Answer

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

有很多简单的方式可以在本地机器上提供静态文件。其中最简单的之一是使用live-server、serve或类似工具。

为了使其与live-server配合使用，只需要几个步骤：

1）安装

npm install -g live-server

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

3) 运行live-server命令。

这将打开一个浏览器标签，以index.html作为入口点，并模拟本地机器上的Web服务器。在文档中还有许多其他选项可供使用。

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