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

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根据此处的评论创建了一个名为 的文件夹。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',
};