为什么我无法在本地预览 Vue 项目?

问题描述

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

解决方法

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

enter image description here

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

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

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

CLI 项目是为在服务器上使用而构建的。我们的想法是能够将 dist 目录中的文件部署到服务器并拥有一个可运行的 Vue 应用程序。

,

只是为了补充@aside 的精彩回答。

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

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

vue.config.js

module.exports = {
    publicPath: ''
}

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...