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

Posted 2023-02-22

【中文标题】Vue CLI 在没有服务器的情况下构建和运行 index.html 文件

【英文标题】：Vue CLI build and run index.html file without server

【发布时间】：2018-11-21 10:15:42

【问题描述】：

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

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

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

【问题讨论】：

由于浏览器对读取本地文件有多么严格（出于安全原因），在不启动 Web 服务器的情况下进行任何本地 webdev-testing 是没有希望的。

【参考方案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 模式。

【讨论】：

现在应该是 publicPath，因为 baseUrl 已弃用

【参考方案2】：

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

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

你需要做什么：

打开index.html 找到href=/并替换为href= 找到src=/并替换为src=

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

【讨论】：

资产文件怎么样？我的存储在/src/assets/img/...，然后在/dist/文件夹中，它们被移动到/dist/img/...

【参考方案3】：

你可以使用 http-server 模块

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

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

【讨论】：

我实际上是在尝试将生成的文件用于移动应用程序，因此我将无法运行服务器。

我假设您不是在移动设备上开发 Vue 应用程序。所以在你的开发机器上启动服务器，将移动设备放在同一个局域网中，在ip-of-dev:8080上打开设备上的浏览器

我正在使用 Phonegap 开发它。我找到了另一种解决方法，很快就会发布答案。感谢您调查它。我很感激。