【问题标题】:Why can't I preview Vue project locally?为什么我不能在本地预览 Vue 项目?
【发布时间】:2021-08-15 13:26:20
【问题描述】:

来自 Vue CLI https://cli.vuejs.org/guide/deployment.html,它指出 dist 目录是由 HTTP 服务器提供服务的。但是为什么我不能从 index.html 中预览呢?因为我的理解是 Vue 只是一个前端 JavaScript 框架,所以应该可以从任何浏览器预览它。如果是使用cdn创建一个简单的vue项目,可以直接在浏览器上预览。但是通过 CLI 创建的 vue 项目并非如此。谁能解释一下。

【问题讨论】:

  • 你的项目建好了吗? (npm 运行构建)

标签: javascript vue.js vue-cli serve


【解决方案1】:

查看 Chrome 开发工具。您会看到一些类似的错误:

如您所见,有一堆文件无法导入。这是因为这些文件不是使用相对文件路径导入的,而是使用绝对路径导入的(从根目录开始,index.html 中的所有文件中的前缀 / 可见)。

如果您从dist 目录运行本地服务器,根目录将解析到该目录,从而可以正确导入文件并在浏览器中显示您的站点。

但是,如果您只是在浏览器中打开 index.html 文件,/ 将解析到不包含这些文件的操作系统的根目录。如果您要将所有这些文件复制到操作系统的根目录中,以便成功解析路径,则不需要服务器来查看您的 Vue 应用程序。

CLI 项目的构建考虑了在服务器上的使用。这个想法是能够将 dist 目录中的文件部署到服务器并拥有一个工作的 Vue 应用程序。

【讨论】:

    【解决方案2】:

    只是为了补充来自@aside 的一个很好的答案。

    您可以使用 Vue CLI 的 publicPath 配置选项并将其设置为 ''./ - 这应该足以使其在文件系统中工作

    该值也可以设置为空字符串 ('') 或相对路径 (./),以便使用相对路径链接所有资产。这允许构建的包部署在任何公共路径下,或用于基于文件系统的环境中,如 Cordova 混合应用程序。

    vue.config.js

    module.exports = {
        publicPath: ''
    }
    

    【讨论】:

      猜你喜欢
      • 2020-05-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-01-10
      • 1970-01-01
      • 2014-12-02
      • 2020-06-04
      • 1970-01-01
      相关资源
      最近更新 更多