解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题

news2025/9/18 13:24:51

目录

场景描述

问题分析

解决方案

vue-cli@2项目通过修改index.html引用路径或添加配置信息

方案一：将index.html中引用的绝对路径改为相对路径

方案二：修改项目的assetsPublicPath或添加publicPath配置信息

vue-cli@3项目通过修改index.html引用路径或添加配置信息

方案一：将index.html中引用的绝对路径改为相对路径

方案二：修改项目的publicPath配置信息在本地访问

vue-cli@2/3项目通过搭建本地服务器，实现本地访问

方案一、使用http-server静态服务器 

方案二、通过在dist目录中起服务访问

方案三、使用http模块，手写node服务器

  

场景描述

通过vue-cli创建的vue项目，npm run serve运行开发环境可以看到效果，但是执行 npm run bulid本地打包之后生成的dist文件下的index.html用浏览器无法直接打开，显示空白页，控制台有很多报错信息如下：GET file:///...... net::ERR_FILE_NOT_FOUND（vue-cli3创建vue项目）或是 Failed to load resource: net::ERR_FILE_NOT_FOUND（vue-cli2创建vue项目）

问题分析

可能有人会问，为什么打包后的dist文件夹里inde.html，在本地直接打开无法访问，要放在服务器的根目录才能打开，如何才能像访问 npm run dev（使用vue-cli2创建的vue项目的启动方式）或npm run serve（使用vue-cli3创建的vue项目的启动方式） 的地址那样访问？

首先，我们来解释一下vue脚手架项目启动项目的原理，其实，在你使用 npm run dev或npm run serve的时候，实际是临时创建了一个webpack-dev-server或vue-cli-service serve的node服务器，为了方面后面的 hot-reload（热重载）的需求，必须所有的更新都要在服务上处理后进行更新，如果你是单纯用file协议打开静态网站的方式，是没有办法做到这个处理的，如果可以，也是需要编译和重载的，成本很高昂。所以，vue通过npm run dev或npm run serve启动项目，也是以启动服务器的方式进行编译的。

我们之所以出现报错，这是因为打包的dist文件夹是需要放在服务器上运行的，资源默认放在根目录下。你打开index.html就可以发现，被打包成的css和js文件的引用使用的是绝对路径，例如： <link href="/css/app.8acb2246.css" rel="stylesheet">、<script src="/js/chunk-vendors.da145e16.js"></script>，但对本地磁盘来说，" / " 指向的是磁盘根目录，所以，找不到引用的文件。因为当我们在本地使用file协议打开index.html是需要引用相对路径的静态资源。一句话来说，就是打包以后的index.html文件中的引用路径不对，才导致报错

解决方案

这里会介绍使用 vue-cil@2 和 vue-cil@3 两种方式创建vue项目的解决方案

有以下3种解决方案

方案一：将index.html中引用的绝对路径改为相对路径

方案二：修改或是添加项目的配置信息，实现本地访问 

方案三：通过搭建本地服务器，实现本地访问（3种方法）

vue-cli@2项目通过修改index.html引用路径或添加配置信息

有3种实现方案，推荐第二种方案！ 

方案一：将index.html中引用的绝对路径改为相对路径

可以选择手动将index.html中所有引用资源的地方全部改成相对路径，例如：

<script type=text/javascript src=static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=static/js/vendor.5d4fc21e9bad685c9b37.js></script>
<script type=text/javascript src=static/js/app.394b37fa387958cd2f69.js></script>

方案二：修改项目的assetsPublicPath或添加publicPath配置信息

当然，更优雅的做法是修改项目的assetsPublicPath或添加publicPath配置信息，有3种方法，推荐第3种，如下：

1、修改config/index.js中build对象的assetsPublicPath，改为当前目录（./），而不是根目录（/）;

module.exports = {
  ...

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',

    // 修改前
    // assetsPublicPath: '/',

    // 修改后：assetsPublicPath改为当前目录./
    assetsPublicPath: './',

    ...
  }
}

2、修改build/webpack.base.conf.js中的publicPath，在build/webpack.prod.conf.js添加publicPath 

* build/webpack.base.conf.js文件

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    // 修改前
    // publicPath: process.env.NODE_ENV === 'production'
    //   ? config.build.assetsPublicPath
    //   : config.dev.assetsPublicPath

    // 修改后
    publicPath: process.env.NODE_ENV === 'production'
      ? './' + config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath
},

* build/webpack.prod.conf.js文件

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  // 修改前
  // output: {
  //   path: config.build.assetsRoot,
  //   filename: utils.assetsPath('js/[name].[chunkhash].js'),
  //   chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  // },

  // 修改后
  output: {
    publicPath: './',     // 添加的一行
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

3、在 webpack.prod.conf.js 中的 output 对象添加参数publicPath:'./ '

具体代码如下：

const webpackConfig = merge(baseWebpackConfig, {
  ...
  output: {
    publicPath: process.env.NODE_ENV === 'production'
      ? './' +config.build.assetsPublicPath
      : './' + config.dev.assetsPublicPath,
    // 上面是添加代码
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  ...
})

以上方案一、二，都可以解决，此时再运行npm run build打包后，打开dist / index.html发现所有资源的引用路径已经变为相对路径了，此时可以双击index.html在浏览器中正常访问了！

vue-cli@3项目通过修改index.html引用路径或添加配置信息

有2种实现方案，推荐第二种方案！ 

方案一：将index.html中引用的绝对路径改为相对路径

例如：

<link href="js/chunk-vendors.da145e16.js" rel="preload" as="script">
<link href="css/app.8acb2246.css" rel="stylesheet">
<script src="js/chunk-vendors.da145e16.js"></script>
<script src="js/app.1102999b.js"></script>

方案二：修改项目的publicPath配置信息在本地访问

当然，更优雅的做法是修改项目的publicPath配置信息，如下

1、在项目根目录新建 vue.config.js 文件，并添加publicPath: './ ' 

// vue.config.js
module.exports = {
  publicPath: './'
}

2、然后，关键的一步，在 src/router.js 中删去 mode: 'history'

...
export default new Router({
  // mode: 'history',  // 有这句的删掉，没有就不用管，因为默认mode: 'hash'模式
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

现在再次执行npm run build重新打包后，打开 dist下的 index.html就可以正常访问了

👉 番外：页面可以正常打开了，但是页面上的一些图片请求失败，怎么办

解决办法：在build/utils.js中，如下位置，添加 publicPath: '../../'

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: "vue-style-loader",
    publicPath: "../../"
  });
}

👉 番外：页面可以正常打开了，如果vue-router跳转路由页面无法显示

解决方法：打开index.js看路由配置，mode:' hash ' 改这个配置即可：

//VueRouter's setting
export const router = new VueRouter({
  base: "/",
  mode: "hash",
  routes
});

 参考链接：解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

vue-cli@2/3项目通过搭建本地服务器，实现本地访问

有3种搭建本地服务器实现方案，推荐第2种方案！

方案一、使用http-server静态服务器 

 http-server是一个简单的、零配置的命令行静态 HTTP 服务器。它足够强大，可以用于生产用途，但它足够简单且可破解，可用于测试、本地开发和学习。

用法查看官网：http-server - npm

http-server是一个基于命令行的简单的静态HTTP服务器，使用方法很简单：

① 安装

npm install http-server -g

② 进入dist文件夹

cd dist

③ 执行命令

http-server

大功告成！可以打开浏览器在localhost:8080中查看了。

方案二、通过在dist目录中起服务访问

使用express框架，搭建一个简单的nodejs服务器

step1：在dist 路径下，安装express包

npm install express

 step2：在dist文件中添加服务器app.js文件

var express = require("express");
var app = express();
const hostname = "localhost";
const port = 8080;
// Express 提供了内置的中间件 express.static 来设置静态文件
app.use(express.static("./"));
app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}`);
});

step 3：命令行或是在终端运行

node app.js

方案三、使用http模块，手写node服务器

使用http模块只需要在文件中通过require(“http”) 引入即可。http模块是node.js原生模块中最为亮眼的模块。传统的HTTP服务器都会由nginx之类的软件来担任，但是node.js不需要。node.js的http模块本身就可以构建服务器，而且性能非常可靠。

◼️ 了解http模块：Node学习HTTP模块(HTTP 服务器与客户端) | Node.js核心模块—http模块应用

我们可以使用nodejs原生的http模块，创建web服务器，在dist同级目录中新增文件server.js

// server.js
// 1. 引入接下来要用到的node内置模块
const http = require("http");
const url = require("url");
const path = require("path");
const fs = require("fs");

// 2. 利用path解析当前目录，然后拼接dist目录，使得服务器当前的根目录变为dist
const root = path.join(path.resolve(process.argv[2] || "."), "dist");

// 3. 创建http服务器
const server = http.createServer((request, response) => {
  // 4. 解析请求url获取文件路径
  const pathname = url.parse(request.url).pathname;
  const filepath = path.join(root, pathname);

  // 5. 使用fs文件系统模块读取index.html文件并返回给前端
  fs.stat(filepath, (err, stats) => {
    if (!err && stats.isFile()) {
      // 响应头设为200
      response.writeHead(200);
      // 创建一个读写流管道，将index.html文件内容写入response并返回
      fs.createReadStream(filepath).pipe(response);
    } else {
      // 请求路径不对时返回404
      response.writeHead(404);
      response.end("404 Not Found");
    }
  });
});

// 6. 服务器监听8080端口
server.listen(8080);

命令行定位到app.js同级目录中执行node app.js，此时，在浏览器中可以访问http://localhost:8080/index.html查看效果。 

参考资料

vue本地打开打包后生成index.html无法显示内容

解决vue项目打包后打开index.html文件一片空白

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/752333.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Mars3d采用ellipsoid球实现模拟地球旋转效果

Mars3d采用ellipsoid球实现模拟地球旋转效果

1.Mars3d采用ellipsoid球实现模拟地球旋转效果 2.开始自选装之后&#xff0c;模型一直闪烁 http://mars3d.cn/editor-vue.html?idgraphic/entity/ellipsoid 3.相关代码&#xff1a; import * as mars3d from "mars3d"export let map // mars3d.Map三维地图对象 …
阅读更多...
Linux基础服务10——虚拟化kvm

Linux基础服务10——虚拟化kvm

文章目录 一、基本了解二、安装kvm2.1 部署准备2.2 安装基础服务2.3 安装web管理服务 三、web界面管理3.1 添加kvm主机3.2 存储管理3.2.1 上传镜像3.2.2 扩容存储池 3.3 网络管理3.4 创建虚拟机3.5 报错处理3.5.1 Server disconnected3.5.1 文件句柄问题 一、基本了解 什么是虚…
阅读更多...
短视频抖音seo源码矩阵系统源码开发规则

短视频抖音seo源码矩阵系统源码开发规则

一、 技术开发文档说明 目录 一、 技术开发文档说明 1. 系统架构 2. 抖音seo排名系统模块组成 二、功能结构&#xff1a; 三、 抖音seo源码开发功能目录 四、 短视频抖音seo矩阵系统源码开发代码展示 1. 建立数据表 1. 系统架构 短视频抖音seo矩阵源码部署功能架构包含…
阅读更多...
基于 MNN 在个人设备上流畅运行大语言模型

基于 MNN 在个人设备上流畅运行大语言模型

LLM&#xff08;大语言模型&#xff09;因其强大的语言理解能力赢得了众多用户的青睐&#xff0c;但LLM庞大规模的参数导致其部署条件苛刻&#xff1b;在网络受限&#xff0c;计算资源有限的场景下无法使用大语言模型的能力&#xff1b;低算力&#xff0c;本地化部署的问题亟待…
阅读更多...
牧云·云原生安全平台v2.0.0正式上线，云上想不安全都难!

牧云·云原生安全平台v2.0.0正式上线，云上想不安全都难!

**前言&#xff1a;**牧云云原生安全平台是长亭牧云团队以开源社区为生态载体技术积累为驱动所打造的云原生安全平台。首创双模探针架构&#xff0c;可选用 Agentless/Agent 多种方案进行部署&#xff0c;覆盖制品、运行时、集群全流程安全&#xff0c;开箱即用、快速实施、成本…
阅读更多...
这所双一流，我求求你不要错过！错过后悔一年！

这所双一流，我求求你不要错过！错过后悔一年！

一、学校及专业介绍 山西大学&#xff08;ShanxiUniversity&#xff09;&#xff0c;位于山西省太原市&#xff0c;是中国办学历史最悠久的高等学府之一&#xff0c;国家“双一流”建设高校。 1.1 招生情况 物理电子工程学院中,081000信息与通信工程、085402通信工程&#xf…
阅读更多...
IIS 部署的应用禁用HTTP TRACE / TRACK方法【原理扫描】

IIS 部署的应用禁用HTTP TRACE / TRACK方法【原理扫描】

远程Web服务器支持TRACE和/或TRACK方法。 TRACE和TRACK是用于调试Web服务器连接的HTTP方法。 直接在网站Web.config文件中进行如下操作&#xff1a;在Web.config中的<system.webServer>节点内添加以下配置即可&#xff1a; <security> <requestFiltering> &…
阅读更多...
水果编曲软件FLStudio21.0.3.3517中文直装版2023最新百度网盘下载

水果编曲软件FLStudio21.0.3.3517中文直装版2023最新百度网盘下载

水果编曲软件FLStudio21.0.3.3517中文直装版2023最新百度网盘完整下载是最好的音乐开发和制作软件也称为水果循环。它是最受欢迎的工作室&#xff0c;因为它包含了一个主要的听觉工作场所。最新水果编曲软件FLStudio21中文直装版有不同的功能&#xff0c;如它包含图形和音乐音序…
阅读更多...
Linux 虚拟机重启远程连接超时

Linux 虚拟机重启远程连接超时

问题 : 虚拟机关机重启之后,本来可以连接的远程,访问超时 原因 : 为了可以访问 CentOS 虚拟机,在 /etc/sysconfig/network-scripts/ifcfg-ens33 中修改使用了network静态ip的方式,在重启后与NetWorkManager自动配置冲突,导致远程无法正常访问 处理方式 &#xff1a; 禁用…
阅读更多...
PyTorch从零开始实现Transformer

PyTorch从零开始实现Transformer

文章目录 自注意力Transformer块编码器解码器块解码器整个Transformer参考来源全部代码&#xff08;可直接运行&#xff09; 自注意力 计算公式 代码实现 class SelfAttention(nn.Module):def __init__(self, embed_size, heads):super(SelfAttention, self).__init__()self.e…
阅读更多...
奥特曼与钢铁侠【InsCode Stable Diffusion美图活动一期】

奥特曼与钢铁侠【InsCode Stable Diffusion美图活动一期】

文章目录 简介图片生成步骤更多体验方式 简介 InsCode 是一个一站式的软件开发服务平台&#xff0c;从开发-部署-运维-运营&#xff0c;都可以在 InsCode 轻松完成。 InsCode 的 Ins 是 Inspiration&#xff0c;意思是创作、寻找有灵感的代码。 Stable Diffusion是文图生成模型…
阅读更多...
MySQL的下载、安装和配置（图文详解）

MySQL的下载、安装和配置（图文详解）

目录 一、MySQL的4大版本 二、软件的下载 1. 下载地址 2. 打开官网&#xff0c;点击DOWNLOADS 3. 点击 MySQL Community Server 三、MySQL8.0 版本的安装 四、配置MySQL8.0 五、配置MySQL8.0 环境变量 六、MySQL5.7 版本的安装、配置 一、MySQL的4大版本 MySQL Commu…
阅读更多...
内存泄露？腾讯工程师2个压箱底的方法和工具

内存泄露？腾讯工程师2个压箱底的方法和工具

导读&#xff5c;遭受内存泄露往往是令开发者头疼的问题&#xff0c;传统分析工具 gdb、Valgrind在解决内存泄露问题上效率较低。本文特别邀请到了腾讯后台开发工程师邢孟棒以 TDSQL实际生产中mysql-proxy内存泄露问题作为分析对象&#xff0c;分享其基于动态追踪技术的通用内存…
阅读更多...
倾斜摄影三维模型数据在哪些行业或场景发挥了重要的作用？

倾斜摄影三维模型数据在哪些行业或场景发挥了重要的作用？

倾斜摄影技术是一种高精度三维建模方法&#xff0c;目前已经在许多行业中获得了认可。倾斜摄影技术就是利用无人机搭载相机以不同的角度捕捉建筑物、道路等物体的外形&#xff0c;并生成高分辨率的三维模型数据。那么&#xff0c;这些数据能够应用在哪些行业或场景中呢&#xf…
阅读更多...
智慧校园能源管控系统

智慧校园能源管控系统

智慧校园能源管控系统是一种搭载了物联网技术、大数据技术、大数据等技术性智能化能源管理方法系统&#xff0c;致力于为学校提供更高效、安全性、可信赖的能源供应管理和服务。该系统包括了校内的电力工程、水、气、暖等各类能源&#xff0c;根据对能源的实时检测、数据统计分…
阅读更多...
最全的ubuntu20.04上安装nvidia和cuda

最全的ubuntu20.04上安装nvidia和cuda

文章目录 一、环境要求二、查询推荐安装的驱动版本三、安装470四、查看显卡驱动是否成功五、安装对应版本的cuda 官方路径 一、环境要求 ubuntu20.04如果之前有过驱动应该先卸载 sudo apt-get --purge remove nvidia* sudo apt autoremove# 卸载cuda sudo apt-get --purge r…
阅读更多...
Jenkins全栈体系（二）

Jenkins全栈体系（二）

Jenkins 第三章 Jenkins Git Maven 自动化部署配置 十、几种构建方式 快照依赖构建/Build whenever a SNAPSHOT dependency is built 当依赖的快照被构建时执行本job 触发远程构建 (例如,使用脚本) 远程调用本job的restapi时执行本job job依赖构建/Build after other proj…
阅读更多...
【分布式应用】kafka集群、Filebeat+Kafka+ELK搭建

【分布式应用】kafka集群、Filebeat+Kafka+ELK搭建

目录 一、kafka概述1.1为什么需要消息队列&#xff08;MQ&#xff09;1.2常见的中间1.3消息队列的优点1.4消息队列的两种模式1.5 Kafka 定义1.6 Kafka 的特性1.7kafka的系统架构 二、部署kafka集群2.1安装kafka2.2Kafka 命令行操作 三、kafka架构深入3.1kfka工作流程及文件存储…
阅读更多...
flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果

flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果

flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果 在开发过程中&#xff0c;经常使用到提示框Dialog&#xff0c;与sheet&#xff0c;使用到了flutter的showDialog与showModalBottomSheet 我这里类似alert弹窗直接调用 flutter 中提供的showDialog()函数显示对…
阅读更多...
QML语法--第二篇

QML语法--第二篇

链接: QML Book中文版(QML Book In Chinese) QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript来提供修饰&#xff0c;或者增加更加复杂的逻辑。 从QML元素的层次结构来理解是最简单的学习方式。子元素从父元素上继承了坐标系统&#xff0c;它的x,y坐标总…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023