vue.js cli 命令“npm run serve”如何工作

Question

运行后npm run serve它给出了一个地址http://localhost:8080并且它有效，这个地址是针对本地服务器的根文件夹但我的项目存在另一个文件夹http://localhost/vue我的问题是地址是如何http://localhost:8080工作的，实际地址在哪里index.html？由于我的实际项目放在localhost/vue文件夹中！地址应该是 http://localhost/vue

Answer 1

我认为您对使用服务时后台发生的事情有些困惑。

当您运行命令时npm run serve，您的项目将由 Webpack 构建，然后通过本地 http 服务器“提供”。该服务器正在使用您项目的构建文件夹作为其根目录。

您似乎已经localhost根据此处的评论创建了一个名为 as 的文件夹。http://localhost不是您计算机中名为“localhost”的文件夹。实际上，它只是您内部 ip 的一个名称：127.0.0.1。您可以通过转到127.0.0.1:8080来测试它，看看它与http://localhost:8080相同

在程序方面，可以说如下： localhost == 127.0.0.1

顺便说一下，您似乎还希望有一个名为 的子文件夹vue，因为这就是您localhost文件夹中的内容。了解以上情况；http://localhost不是localhost您电脑上的文件夹。然而，它是 http 服务器选择的文件夹，在这种情况下，vue 选择/dist项目文件夹内的文件夹。

示例：您的项目文件夹具有以下路径：C:\Users\Admin\Documents\myProject

然后当您在该文件夹中运行时npm run serve，vue http-server 将为该文件夹提供服务（托管）C:\Users\Admin\Documents\myProject\dist

这意味着http://localhost == C:\Users\Admin\Documents\myProject\dist\index.html

但是，如果您的目标是让您的项目充当：http://localhost/my-custom-sub-folder

您必须通过添加以下内容来为您的 vue 项目编辑 vue.config.js：publicPath

vue.config.js 示例：

module.exports = {
  publicPath: '/my-custom-sub-folder',
};

Answer 2

index.html 文件应该默认放置在项目根目录下的“public”文件夹中