vue npm run build打包之后项目打开一片空白,解决办法

最新推荐文章于 2024-08-25 16:06:44 发布
最新推荐文章于 2024-08-25 16:06:44 发布
阅读量1.6w 收藏 21
点赞数 1
分类专栏： vue npm run build
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35310623/article/details/100517269
版权

vue项目使用npm run build打包之后,项目打开一片空白,如下图:

这是因为在打包的时候,没有修改路径,build默认打包路径是根路径,所以需要在修改的文件路径如下

1.config文件下的index.js,下图是默认设置

修改后的结果:

 

2.build文件下的utils.js文件下的

 

3.build文件下的webpack.prod.conf.js文件下的

这样打包好的文件就可以正常打开了

南有樛木。
关注
专栏目录
vue 项目通过 npm run build 打包以后页面没有内容
郭宝的博客
08-19 3384
背景： 通过 npm run build 对vue项目进行打包，并且部署以后，发现页面一片空白，没有任何内容，而且 控制台中也没有任何错误信息。但是通过npm run serve 以后却可以正常预览。如下图： 外网： 本地： 解决办法： 打开Vue项目路由的配置文件，然后将实例化VueRouter中的配置项mode: 'history' 注释掉，因为这个导致打包路径出现问题。然后再次进行 npm run build即可 ...
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
在生产环境下，我们通常会使用npm run build命令进行代码的打包，以优化性能、压缩文件等。然而，在完成打包后，经常遇到在本地无法打开打包后的应用文件的问题。这通常是因为Vue-cli默认设置的静态文件服务路径问题...
vue通过build打包后 打开index.html页面是空白的
热门推荐
weixin_41439996的博客
06-28 2万+
最近在build打包vue项目遇到了几个问题，如下： 1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。 原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPa...
Vue3 vite build 之后不显示页面内容，只显示空白，也没有报错如何解决
最新发布
weixin_48203270的博客
08-25 219
Vue3 vite build 之后不显示页面内容，只显示空白，也没有报错如何解决_vue运行没问题但是页面空白-CSDN博客
vue项目npm run build打包dist文件及打包后空白的解决方法
qq_52126119的博客
11-15 1万+
要想将vue的移动端项目打包成手机的app软件apk格式，首先要将项目打包出dist文件。若空白查看一下配置，可能是配置有错误，（本人用的情况一配置空白，换成了情况二的配置，成功解决！！）
vue build 后页面空白
风吹稻花香的博客
02-01 2006
新建了一个Vue 项目，本地运行正常，build后放到服务器，页面空白，没有报错，以前因为根路径问题出现过空白页，但是基本都会,报404，这次没报错，检查路径配置 publicPath: './', 也没问题，去空白页看了下，发现有app标签，但是标签里是空的，就去router里看了下，发现这次建的router和之前不一样，默认使用了history模式，项目不是在根路径下， 所以就出现空白页了。 解决办法 1.将history模式换回hash。2.将history模式下的base路径根据服务器的路径配置
Vue打包npm run build 打包后空白怎么解决？
weixin_34082789的博客
09-15 632
问题一：路径报错并且页面空白 解决：buld/index.js assetsPublicPath: '/'修改为assetsPublicPath: './' 问题二：没报错页面空白router-view中的内容显示不出来。路由history模式。 HTML5 History模式 解决：// mode: 'history',//将这个模式关闭就好 这里并...
vue npm run build打包之后项目打开一片空白
05-12
如果你在运行 `npm run build` 后，打开项目出现了一片空白的情况，可能有以下几种原因： 1. 路径问题：你的网站文件引用了打包后的文件，但是文件的路径不正确。检查一下你的文件引用路径是否正确。 2. 缺少依赖...
vue中Npm run build 根据环境传递参数方法来打包不同域名
12-12
使用 npm run build -- xxx ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。 1.项目中/config/dev.env.js修改： 新增：HOST: ‘”dev”‘ 'use strict' const merge = require('webpack-merge') const ...
解决vue项目,npm run build后,报路径错的问题
10-14
总结，解决Vue项目`npm run build`后报路径错误的问题，主要涉及`webpack`配置中的`output.publicPath`、`config.index.js`中的`build.assetsPublicPath`以及正确处理CSS样式覆盖和资源引用。理解这些配置和技巧，能...
关于vue的npm run dev和npm run build的区别介绍
10-17
在Vue项目中，我们经常会遇到两种常用的npm脚本命令：`npm run dev`和`npm run build`。这两个命令分别用于启动开发服务器和构建生产环境的应用程序。下面详细介绍一下这两个命令的区别。 1. npm run dev `npm run ...
vue打包后显示空白正确处理方法
11-30
在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览。根据官网打包出来的html直接打开是显示空白。 vue打包后显示空白正确处理方法是 1、找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2、修改 找到对应的位置加上publicPath: '../../' 然后就成功了！ 很多朋友还遇到这样的问题 vue打包后index文件一片空白，怎么回事呢？  vue项目你npm run build打包后，点开index文件打开一片空白， 并报错解决方法：路径问题， 总结 以上所述是小编给大家介绍的vue打包后显示空白正确处理方法，希望对大家有所帮助，如果大家有任
关于vue打包npm run build 之后index页面打开空白问题
henghengzhao_的博客
01-22 1592
vue前端npm run build打包问题以及npm install问题
vue解决执行打包之后打开页面空白问题
qq_60976312的博客
12-28 2088
解决执行build打包命令之后打开dist文件下的html页面空白的问题
VUE build 本地运行空白页
qq_22239651的博客
09-25 1341
1.修改 config/index.js文件 build模块，修改build模块 assetsPublicPath: '/', 修改为 assetsPublicPath: './', 2.修改Router模式，将history模式注释。 export default new Router({ routes: [ { path: '/', name: 'Home', component: Home } ], // mode:
VueCli 4.x npm run build后主页空白的原因及解决方案
King Saj
03-17 673
1:执行 npm run build之后生成dist文件夹 2:运行后发现主页一片空白，什么都没有,有报错 3:开始排查问题! 打开开发者工具进行抓包，发现文件变红，证明文件找不到 4:打开变红的文件链接，确实提示文件不存在，因为实际文件应该在项目根目录下的dist文件夹下。然而他默认在根目录下寻找文件，所以找不到 5:添加dist路径,发现能找到文件 6.在项目根目录下新建vue.config.js文件，并写入代码，然后重新执行npm run build 文件就能找到了 module.expor
npm run build打包界面空白报错
shaleilei的博客
01-25 4262
这个问题本身是因为路径的问题，解决方法有两个： 一、通过服务来请求，不知道你们有没有用过live-server ，知道的人不多，但是很好用，下面是他的使用方法 先全局安装   npm install -g live-server    安装好以后   在你的项目根目录上执行   npm  live-server, 最后你会发现你的项目跑起来了，界面是自动打开的，live-server 就是
VUE3.0 build打包页面空白
weixin_57541273的博客
11-05 1210
vue.config.js文件未配置，3.0需要手动配置。 添加 module.exports = { publicPath: './', outputDir: "dist", // 输出文件目录 lintOnSave: false, // eslint 是否在保存时检查 assetsDir: 'static', // 配置js、css静态资源二级目录的位置 indexPath: 'index.html', } 即可 ...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值