解决vue-cli打包后html文件引用其他文件失效，打开空白问题

解决vue-cli打包后html文件引用其他文件失效，打开空白问题

写一篇解决问题的博客，最近打包vue项目的时候总是机械性解决bug，出现各种各样可能的问题，看网络上也少有对应的解决方法，所以打算写一个下来。
首先要说明的问题应该就是出现最多的bug，当你写完vue项目的时候，（使用到vue-cli的时候哈），执行run npm build，然后发现打包后的html文件，打开后是空白的，然后按F12键查看控制台输出，出现类似如下的页面：
在这里插入图片描述
首先，分析以上报错，共两种，一种是js引用不到，一种是css文件引用不到，而且报错都在产出的index.html文件中报错，这才导致出现空白页面的情况，所以解决这个文件的索引，应该就可以了，而写过原生html的小伙伴知道，我们的html文件引用文件通常如果文件存在，就一定是可以索引到的，那么要做的就是观察html文件的代码及引用的文件是否存在：

<!doctype html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico">
    <title>database</title>
    <script defer="defer" src="/js/chunk-vendors.a61c6f87.js"></script>
    <script defer="defer" src="/js/app.dd10a5af.js"></script>
    <link href="/css/chunk-vendors.10dd4e95.css" rel="stylesheet">
    <link href="/css/app.346d652b.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but database doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
</body>

</html>

以上是打包后的index.html页面，文件的引用位置如上所示，那应该在该页面的根目录中查找对应的文件：
在这里插入图片描述
打开js文件：
在这里插入图片描述
显然，文件存在，但是为什么找不到呢？
再仔细观察一下报错的部分，就会发现请求的地方是：
GET file:///E:/js/chunk-vendors.a61c6f87.js net::ERR_FILE_NOT_FOUND
E盘下哪里会有这个文件夹，所以归根到最后就是请求的地方出错，我找很久的解决方法，最终锁定在路由模块，当路由开启history模式下，如果没有后端来帮助你获取真正请求的路径时，由于初始页面是没有东西的，或者说是初始页面都是引用到其他组件的部分，但是组件最后被打包到js中，而页面加载一开始就会主动去使用路由，来请求对应的js文件，history模式下如果没有后端主动返回地址，那么就会使用初始URL，自然就是向盘符发送请求了，所以解决这个问题的方法就是将history模式去掉：
在vue的route的index.js中：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [

]
const router = new VueRouter({
  // mode: 'history',   这个不要！！！
  base: process.env.BASE_URL,
  routes
})

export default router

这样子到底行不行了，那肯定还是有问题，因为没有配置静态资源的地址问题，还是会出如上找不到文件的情况，所以需要修改vue.config.js中的内容，声明下publicPath为相对路径：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './'
})

这样子就可以运行正常了：
在这里插入图片描述
但是可能有出现静态资源找不到的，可以通过修改vue.config.js中的publicPath，这个其实就是声明静态资源
路径的，比如说你产出不在默认位置，而是别的地方的文件夹下，那么你的静态文件路径应该要加上对应的目录，总之配合outputDir使用就是。
总结：
解决index.html打开空白的情况，使用1、注释路由中mode：history 。
2、修改vue.config.js，添加publicPath的相关声明。