没有服务器的 Vue CLI 构建和运行 index.html 文件

Question

我正在使用最新的 vue-cli version 3.0。

我目前的问题是，每当我运行 npm run build 时，如果没有服务器，dist 文件夹中生成的文件就无法运行。

我希望能够在浏览器上打开 index.html 文件。我该怎么做？

Answer 1

您可以使用 http-server 模块

npm install http-server -g
http-server dist/

通常服务器在端口 8080 启动，因此您可以在 http://localhost:8080

上提供构建应用程序

Answer 2

我可以通过手动更改引用文件的 url 来解决这个问题。

这有点麻烦，但这是一个解决方案，无需弄乱构建配置。

您需要做的事情：

注意：我需要这个解决方案，因为我正在创建一个 Phonegap 应用程序。

Answer 3

我运行遇到了类似的问题，以下两个更改帮助我解决了这个问题。现在我可以在 Chrome 中打开 index.html 作为文件到 运行我的 SPA 从文件系统 .

在vue.config.js中，我没有配置一个publicPath，导致默认的"/".
我必须像这样将它配置为空字符串，以便它使用相对路径：
```
module.exports = {
    publicPath: '',
}
```
^{PS：自 Vue CLI 3.3 使用 publicPath 而不是现已弃用的 baseURL}
我用的是vue-router的history模式，没用在本地文件系统上将路径路由回 index.html。所以我省略模式以返回默认 hash 模式。

Vue CLI build and run index.html file without server