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

た入场券 2023-07-01 10:54 2阅读 0赞

### 问题描述 ###

在进行项目开发的时候，用Vue进行项目框架的搭建并开发，开发完成时需要部署到客户现场，通过命令

npm run build

将项目打包，然后上传至服务器的tomcat目录下，然后通过地址访问时发现，系统首页加载空白。

在浏览器控制台一看，是js和css等资源的引用路径出错，所以解决方法如下。

### 解决方法 ###

1、网上好多文档都说在项目的根目录下找到config文件夹，然后将index.js文件中的某一处路径配置做修改。但是我的项目中连config目录都没有，因为我是用vue-cli 3.0版本脚手架建立的项目框架，所以并没有这些文件。

2、所以，我们只能在项目根目录打开命令行工具，然后通过命令

vue ui

打开项目的配置界面，导入此项目，然后在【配置】选项卡下，选择“Vue CLI”，修改后面的公共路径地址，简单地说就是在之前默认的地址前面加一个“.”，如下所示，修改后保存关闭即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

3、此时在项目中我们会发现，项目根目录下新建了一个“vue.config.js”的文件，里面的内容如下：

module.exports = {
      publicPath: './'
    }

4、我们再次打包后部署，发现页面还是空白，但是控制台中的引用路径错误是不见了，因为我们已经解决了。接下来我们主要看一下此时的空白是什么原因导致的。

5、这次页面空白的时候，我们只要一点击浏览器的刷新按钮，页面就会自动跳转到tomcat的首页去，那可能就是我们的路由配置问题了，通过查阅资料发现确实是路由的问题导致。

6、我们项目中路由模式用的是“history”，在此处我们只需改成“hash”或者直接删除配置模式即可，因为路由默认模式就是“hash”。

7、再次打包部署，项目成功运行。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200121122229807.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dXF3YmxvZy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

相关 vue项目打包后在ie浏览器下出现空白页

如果是vue-cli2.0 在webpack.base.conf.js文件里的。

我不是女神ヾ/ 2024年04月24日 21:01/ 0 赞/ 70 阅读

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

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

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

相关 Vue项目打包时页面空白

修改config/index.js ![在这里插入图片描述][2021042814040156.png] `/` 改为 `./` ![在这里插入图片描述][wat

女爷i/ 2023年01月17日 08:55/ 0 赞/ 181 阅读

相关 vue项目打包发现首页打不开或空白页面

vue项目打包发现首页打不开首先我们打包成功之后会出现一个dist文件错误版 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

野性酷女/ 2022年11月21日 11:45/ 0 赞/ 261 阅读

相关 [问题已处理]-vue项目发布之后显示空白页

导语：线上jenkins发布的前端代码访问是空白页但是开发手动打包是没问题的一开始以为是这个问题 ![cd08435af2f1a329bdc453527bb8ca74.

朴灿烈づ我的快乐病毒、/ 2022年09月14日 02:27/ 0 赞/ 226 阅读

相关 vue项目打包后打开空白解决办法

主要就是： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

太过爱你忘了你带给我的痛/ 2022年09月01日 14:49/ 0 赞/ 435 阅读

相关 vue build打包之后首页白屏的问题

问题描述本地的vue项目在server端浏览没问题，但是执行npm run build 打包之后在本地预览是白屏。有很多js,css无法加载。 1.解决方法在conf

川长思鸟来/ 2022年06月03日 08:23/ 0 赞/ 400 阅读

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

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

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

相关 vue项目打包出现空白

一位大牛写的 vue项目打包终端运行命令 npm run build 点击index.html，通过浏览器运行，出现以下报错，如图： ![70][] 那么应该如何

Myth丶恋晨/ 2021年09月19日 22:32/ 0 赞/ 505 阅读

相关 vue项目打包后打开空白解决办法

网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下conf

我会带着你远行/ 2021年09月16日 21:52/ 0 赞/ 620 阅读