Vue CLI 在没有服务器的情况下构建和运行 index.html 文件答案

【问题标题】：Vue CLI build and run index.html file without serverVue CLI 在没有服务器的情况下构建和运行 index.html 文件
【发布时间】：2018-11-21 10:15:42
【问题描述】：

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

我当前的问题是，每当我运行npm run build 时，dist 文件夹中生成的文件都无法在没有服务器的情况下运行。

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

【问题讨论】：

【解决方案1】：

我遇到了类似的问题，以下两项更改帮助我使其正常工作。现在我可以在 Chrome 中打开 index.html 作为文件从文件系统运行我的 SPA。

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

【讨论】：

【解决方案2】：

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

这有点痛苦，但这是一个无需搞乱构建配置的解决方案。

你需要做什么：

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

【讨论】：

【解决方案3】：

你可以使用 http-server 模块

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

服务器通常从端口 8080 开始，因此您可以在 http://localhost:8080 上提供构建应用程序

【讨论】：

我实际上是在尝试将生成的文件用于移动应用程序，因此我将无法运行服务器。
我假设您不是在移动设备上开发 Vue 应用程序。所以在你的开发机器上启动服务器，将移动设备放在同一个局域网中，在ip-of-dev:8080上打开设备上的浏览器
我正在使用 Phonegap 开发它。我找到了另一种解决方法，很快就会发布答案。感谢您调查它。我很感激。