vue-cli应用 run build 打包后静态资源无法访问出现页面空白情况解决方法

最新推荐文章于 2024-06-22 15:46:00 发布
最新推荐文章于 2024-06-22 15:46:00 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanjinfeng/article/details/89522347
版权

1. 项目根目录 build/utils.js文件 generateLoaders函数中新增属性

publicPath: '../../'        // 新增

2. 项目根目录下config/index.js build对象中修改属性

assetsPublicPath: './'     // 修改

zhanjinfeng
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。 build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname
vue-cli项目打包后运行页面空白
qq_38913900的博客
01-20 726
vue-cli项目打包后运行页面空白 可能情况：打包后文件路径不对，引用失败导致空白 解决方法： assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’; ...
vue3和electron打包出现页面空白的解决方案之一
最新发布
2302_79641988的博客
06-22 490
修改完路由模式后，记得把在页面中进行导向的路由路径前加上#号，如window.open(`${window.location.origin}/#/hardcheck`, '_blank');vue使用路由进行开发，vue路由有两种，分别为createWebHashHistory和createWebHistory。当你的打包后的electron应用页面出现空白，可以检查一下你的路由使用的哪一种。一般来说，electron不支持createWebHistory路由。
vue项目打包发版后路径访问页面空白
hly15555307663的博客
01-11 772
从这里可以看到，问题出在访问的路径不正确才导致的页面空白，对于这种问题该怎么处理呢？ 找到文件vue.config.js 在此处配置publicPath publicPath: process.env.VUE_APP_BUILD_MODE === 'devops' ? process.env.VUE_APP_BASE_URL : process.env.VUE_APP_BUILD_MODE === 'poc' // 生产环境 ? '/文件名/' .
Vue cli3真正可以解决npm run build后部分静态资源访问不到的方法
wanna__ac的博客
02-02 1389
我看了不少帖子，基本上都没用，解决方法无论是vue官网，还是vue官网的讨论帖，也都没有个沾边的 vue cli3官方文档 我直接下结论了：把history模式删掉，就可以访问到静态资源history模式和hash模式 vue cli3取消了build文件夹，改用了vue.config.js配置文件来进行配置，这个文件需要用户自己在根目录下创建，配置信息可参考vue.config.js配置 问题出在router/index.js的模式里，默认的模式是hash模式，将这句删除后，部分404的静态资源得以显示
vue项目build打包后，静态和服务器访问效果出不来，icon图标无法加载？过来我教你
Mgf_Yzy的博客
08-28 1629
今天遇到一个令人很头疼的问题，vue项目build之后，静态资源和服务器端访问空白，啥效果都没有，最后无奈只好查百度，找方法，正当我放弃的时候，突然找到了救心丸 来，直接上图 好不容易打包好的文件，结果给我报一堆错，难怪页面出不来 当页面出不来时，可能是你的路径不对 查原因是因为绝对路径的原因：你的config文件夹中的index.js文件，里面的build代码块路径是这样的 这里的assetsPublicPath路径是根路径，静态资源当然是访问不到的，修改后是这样的，及那个绝对路径改为相对路径就好了
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
通过在命令行中执行`npm run build`，Vue CLI会将源代码编译并打包成一个名为`dist`的文件夹，其中包含部署到生产环境所需的静态资源。在这个过程中，Vue CLI会处理路径，将所有静态资源（如CSS、JS文件）重定位到...
关于vue-cli3打包代码后白屏的解决方案
10-14
总之，解决Vue CLI 3打包后白屏的问题通常涉及资源路径的调整、Vue Router的配置以及服务器配置。通过仔细排查和适当调整，大多数问题都可以得到解决。同时，保持良好的代码组织和遵循最佳实践也能避免类似问题的...
vue-cli脚手架打包静态资源请求出错的原因与解决
12-02
在使用 Vue CLI 打包项目时，可能会遇到静态资源请求出错的问题，尤其是在将项目部署到特定路径下。这个问题主要体现在访问应用时，CSS 和 JS 文件无法正常加载，服务器返回 404 错误。 首先，问题的根源在于 Vue ...
vue-cli3项目打包后自动化部署到服务器的方法
10-14
Vue CLI 3 的打包命令通常是 `npm run build`，它会生成一个 `dist` 目录，包含优化过的静态资源，适合生产环境。 接下来，为了实现自动化部署，我们需要借助一个名为 `scp2` 的模块，它允许我们通过 SSH 协议安全...
vue填坑之webpack run build 静态资源找不到的解决方法
10-18
`npm run build`的目的是将Vue应用打包成静态资源，以便部署到服务器。当这些资源在服务器上找不到时，问题可能出在`config/index.js`的Webpack配置中。在本例中，问题在于打包后的静态资源路径没有包含服务器上的...
Vue--解决build静态资源后无法直接访问问题
随便写写
07-08 6478
问题原因，打包之后访问路径错误，index.html打开是空白， F12报错找不到引用文件，一看引用在了根目录（文件所在盘，如：C盘、E盘） 解决 步骤1，修改使用路由方式 将路由从history换成hash const router = new VueRouter({ mode: "hash", base: process.env.BASE_URL, routes }); 步骤2，修改使用配置文件 // vue.config.js module.exports = { // 解决
vue-cli2.9.6 build项目无法访问资源 & 无法访问elementUI字体
夏2同学的博客
12-11 281
build后资源无法访问 根目录下面 /config/index.js assetsPublicPath改为 ‘./’ elementUI字体无法访问 /build/utils.js 添加 publicPath:'../../'
vue-cli build之后打开网页是空白页
weixin_55014951的博客
01-21 1595
打开网页的情况是一片空白,也没有404 f12检查可以发现 这里的路径都是'/'开头 这是原因所在,具体可以看vue官网的参考配置的publicPath这一块 他的默认配置是'/' 我们需要的是'./' 解决办法 在vue.config.js中(这个文件如果没有需要自己创建)添加 module.exports = { publicPath:'./' } 然后重新 npm run build 这里提一下 我有看见其他博客说什么 在config/inde.
vue cli 打包发布 白屏 问题 页面空白 问题解决办法 非常简单 亲测可用
IT人生 80后老吴
09-15 1691
问题比较简单，老鸟略过 问题现象 最近在学习vue ，使用脚手架工具 vue-cli创建工程后目录如下： 打包发布到生产环境的时候，按照官方文档说法， cd 到工程目录 npm run build 然后生成的dist目录就是用来发布的文件 按照这个说法确实不报错 发布到tomcat webapp目录下之后，用浏览器打开白屏 并且 看到引用的 js文件找不到 ## 解决办法 查看官方文档 发现有这么一句话 vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的
若依框架前后端打包到linux部署,踩坑
aitanxiaofeng的博客
11-28 4119
也就是想通过localhost/admin访问,而不是直接通过localhost访问。
npm run build 打包后，如何运行在本地查看效果（Apache服务）
CWW2016的博客
09-05 5443
目前，使用vue-cli脚手架写了一个前端项目，之前一直是使用npm run dev 在8080端口上进行本地调试。项目已经进行一半了，今天有时间突然想使用npm run build进行上线打包，试试能否成功看到我的项目效果。一开始是毫无头绪，什么都不懂，直接是就在命令行上敲下：npm run build命令。 好开心啊，竟然没有报错。以为就这么简单的成功了，在浏览器上输入：htt...
vite build打包后页面不能正常访问解决方法
qq_39111074的博客
04-19 5181
vite build打包后页面不能正常访问解决方法
vue cli3创建的项目，run serve能运行，run build后不能打开问题解决
没有撤退可言.
02-20 1303
Failed to load resource: net::ERR_FILE_NOT_FOUND 控制台报错。
"build": "vue-cli-service build",
07-22
当你运行 `npm run build` 命令时，它会执行 `vue-cli-service build`，这将根据项目配置文件（例如 `vue.config.js`）中的设置，将你的 Vue.js 代码编译和打包成静态文件。这些文件可以部署到服务器上，以便在生产...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhanjinfeng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值