VUE 打包后访问index.html空白页面问题和找不到静态文件问题

朴灿烈づ我的快乐病毒、 2022-10-11 12:15 447阅读 0赞

背景：  
        vue项目，打包后生成的**dist下index.html文件打开报错**问题！

### 错误1：显示无访问文件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]

**错误原因**： router路由在**history**模式打包后出现空白页面的情况,而且没有资源加载错误的报错信息

解决办法：在 **router/index.js** 文件中定义

const router = new VueRouter({
      //mode: 'history',//屏蔽或删除，默认 hash 模式
      base: process.env.BASE_URL,
      routes
    })

###  错误2：控制台显示找不到静态文件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1][]

**错误原因**：没有指定build后文件路径

解决办法：在 **vue.config.js** 文件中定义

module.exports = {
        publicPath: './',    // 基本路径
        outputDir: 'dist',   // 设置项目打包生成的文件的存储目录，可以是静态路径也可以是相对路径。
        assetsDir: 'static', // 设置放置打包生成的静态资源 (js、css、img、fonts) 的目录
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: /images/20221005/cdfb61fac3c44b1393ad0bff25893b07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1]: /images/20221005/d57aa86a37e140e280e2f0368957febe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue项目打包部署后首页空白的问题

问题描述在进行项目开发的时候，用Vue进行项目框架的搭建并开发，开发完成时需要部署到客户现场，通过命令 npm run build 将项目打包，然后上传至服

た入场券/ 2023年07月01日 10:54/ 0 赞/ 3 阅读

相关 vue3打包页面不显示问题

打包静态资源查看不了解决第一步：router文件夹下的index.js里注释或修改路由方式![在这里插入图片描述][20200630125725271.png_pic_c

以你之姓@/ 2023年02月21日 11:49/ 0 赞/ 12 阅读

相关 Vue 项目打包之后，CSS 找不到问题

Vue 项目打包之后，CSS 找不到问题 > 记录日常开发中遇到的坑问题：我把vue项目打包之后放在本地的web环境下可以正常显示，但是我放到 nginx 服务器之

﹏ヽ暗。殇╰゛Y/ 2023年01月10日 05:21/ 0 赞/ 189 阅读

相关解决vue3打包过后空白页面

解决vue3打包过后空白页面在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径

深碍√TFBOYSˉ_/ 2022年11月17日 05:18/ 0 赞/ 541 阅读

相关打包vue文件后页面空白，出现报错

报错如下： Refused to apply style from 'http://127.0.0.1:5500/css/chunk-43aa77e1.33bcbef

r囧r小猫/ 2022年11月15日 11:40/ 0 赞/ 766 阅读

相关 VUE 打包后访问index.html空白页面问题和找不到静态文件问题

背景： vue项目，打包后生成的dist下index.html文件打开报错问题！错误1：显示无访问文件

朴灿烈づ我的快乐病毒、/ 2022年10月11日 12:15/ 0 赞/ 448 阅读

相关 vue.js解决刷新404找不到页面问题

vue.js解决刷新404找不到页面问题参考文章： [（1）vue.js解决刷新404找不到页面问题][1_vue.js_404] （2）https://www.cnb

绝地灬酷狼/ 2022年09月13日 04:17/ 0 赞/ 236 阅读

相关 Java打包找不到资源文件问题

`关于打包jar找不到资源文件的这个问题困扰了我太久，开始在网上一顿百度，什么getSource方法都试遍了但依然没有用。原来解决办法很简单我的项目在java代码中是这么写的

怼烎@/ 2022年06月04日 09:36/ 0 赞/ 492 阅读

相关访问phpMyAdmin空白页面问题

访问 ip/phpMyAdmin 空白页面，打开浏览器控制台，发现有一个请求返回 500。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_sha

曾经终败给现在/ 2022年03月11日 03:08/ 0 赞/ 588 阅读

相关 vue-cil3项目打包后浏览器打开空白问题

vue项目目录结构： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

比眉伴天荒/ 2021年09月29日 02:48/ 0 赞/ 603 阅读