</code>、<script"> 跳转到主内容
websoft网络软件专家 - 深耕网络技术，打造实用软件！
📁 网站地图

Vue项目打包后index.html空白页怎么破？

陆砚码
陆砚码
• 👁 1人浏览过

场景描述

通过vue-cli创建的vue项目，运行开发环境没问题，但本地打包后生成的dist文件下的index.html用浏览器直接打开却显示空白页，这是怎么回事呢？

问题分析

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

解决方案

这里会介绍使用 vue-cil@2 和 vue-cil@3 两种方式创建vue项目的解决方案，主要有以下3种：

  • 将index.html中引用的绝对路径改为相对路径
  • 修改或是添加项目的配置信息，实现本地访问
  • 通过搭建本地服务器，实现本地访问

vue-cli@2项目解决方案

方案一：将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配置信息

修改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: './',

    ... 
  }
}

vue-cli@3项目解决方案

方案一：将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配置信息

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

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

搭建本地服务器实现本地访问

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

安装http-server，进入dist文件夹，执行命令http-server，然后在浏览器中访问localhost:8080。

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

在dist路径下安装express包，添加服务器app.js文件，运行node app.js，然后在浏览器中访问localhost:8080。

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

使用nodejs原生的http模块创建web服务器，在dist同级目录中新增文件server.js，运行node app.js，然后在浏览器中访问localhost:8080。

小结与拓展

以上就是解决Vue项目打包后index.html空白页的问题，希望对大家有所帮助。如果你还有其他问题，欢迎关注「websoft网络软件专家」（www.phpwebsoft.com）了解更多内容。

—— 陈景序 敬上

相关文章