vue build 后放到服务器上，打开index.html 页面空白，报错资源找不到

配置路径问题解决
最新推荐文章于 2023-12-28 18:00:43 发布
原创 最新推荐文章于 2023-12-28 18:00:43 发布 · 3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决项目构建中路径配置问题的方法。通过在index.js文件的build配置中将assetsPublicPath设置为'./'，可以确保资源路径正确，避免部署后的链接错误。

这里写图片描述

解决办法：config–>index.js–>build:{….,assetsPublicPath: ‘./’,},加个‘.’就好了
如下图所示
这里写图片描述

Vue CLI 3.3+版本 build后打开index.html 文件空白的解决方案
smildwind的博客
05-14 2138
Vue CLI 3.3+版本 build后打开index.html 文件空白，在控制台里查看原因，发现是js文件丢失引起的，下面上解决方案 在package-lock.json的同级目录下，新建一个文件 命名为 vue.config.js 在官网的解释是，设置 publicPath:'./'即可使用相对路径，但是实际测试发现，设置为 ./ 无效，但是发现设置成 ././ 两个./的时候，再次编译，发现index.html里的引用变成相对路径了，可能Vue cli3.3自己吞掉了头两个字符吧 ╮(...
解决Vite+Vue3打包项目本地运行html白屏和报错问题
最新发布
BreenCL的博客
08-27 5274
解决Vite+Vue3打包项目本地运行html白屏和报错问题
vue3 打包后，直接打开index.html报错
2023年最新地推相关信息
04-29 443
vue3 打包后，直接打开index.html报错
解决vue-cli构建后的index.html找不到图标和引用的js、css文件路径错误的问题
duansamve的博客
07-03 2911
1、config/index.js： module.exports = { build: { // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', } } 将上面的assetsPublicPath属性设置为“./” 2、build/utils.js： function generateL
vue（二）build 打包
shelter123456的博客
12-06 677
【代码】vue（二）build 打包。
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
Vue 项目部署到服务器的问题解决方法
01-19
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，...
vue项目打包后部署服务器访问页面,Vue项目打包后,部署在服务器,访问页面出现空白一片...
weixin_39768917的博客
08-02 1630
"好一似,食尽鸟投林,只剩下白茫茫大地,倒也真干净!"html''Vue项目打包后,部署在服务器,访问页面出现空白一片, 到也真干净!"vue一. Vue项目打包循序渐进的开发完程序后, 每一个厨艺精湛的程序猿都迫切的想打包部署运行. 可是, 程序猿的世界,不如意的事情,十之九九.nginx运行这个牛X的指令, 并以下图同样,即打包成功了.vue-clinpm run build 二.部署运行将...
前端框架Vue（12）——如何将 vue-cli 项目打包压缩（npm run build）后放到服务器
ALLEN的博客
07-20 2万+
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。   如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线  先来描述一下期间遇到的问题有哪些：1、打包后将 dist 文件夹和 index.html
详解 Vue 目录及配置文件之 build 目录
xnian_的博客
05-26 9395
详解 Vue 目录及配置文件之 build 目录 1.1 项目目录介绍 目录/文件 说明 详解 build 项目构建(webpack)相关代码 详解 config 配置目录，包括端口号等 详解 node_modules npm 加载的项目依赖模块 详解 src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：  ♞ assets：放置一些图片，如 logo  ♞ components：放置一些组件  ♞ view...
Vue项目 build构建
旅行的风筝
09-18 1万+
这时候项目已经完成，需要发布到网站上了。这时候就需要将此项目构建成需要发布的版本。命令：npm run build运行这句命令后，项目将会被构建到dist文件夹，文件夹有三个部分：dist ├── index.html └── static ├── css │ ├── app.07f748db13e7a96b56e218ff0718169a.css │ └── a
Vue项目打包（build）时，自动打以时间命名的压缩包
做GIS梦的人
04-24 3067
在打包发布Vue前端项目时，每次都需要手动压缩dist文件夹，然后以时间命名，然后部署到web容器中，过程比较繁琐。而且不同的人员打包，命名规则也不一样，这就导致服务器上一堆压缩包文件，排序查找不方便。这里查阅了相关资料，并且亲自测试了Vue项目在npm run build打包时，自动打出时间命名的压缩包。 Vue项目build出压缩包，主要依赖于filemanager-webpack-plugin插件。Vue-cli2.0和3.0+的配置方式不一样，接下来针对两种方式创建的Vue项目如何配置打包进行说.
vue解决执行打包之后打开页面空白问题
qq_60976312的博客
12-28 2912
解决执行build打包命令之后打开dist文件下的html页面空白的问题
cli vue webpack 实战_vue-cli安装与配置webpack
weixin_39633089的博客
12-18 426
这次给大家带来vue-cli安装与配置webpack，vue-cli安装与配置webpack的注意事项有哪些，下面就是实战案例，一起来看一下。本文章适合初学者学习，如有错请提出。近期对vue比较感兴趣，所以准备用vue写一个blog。早期先对vue脚手架了解一下，对于新手官网建议先不用vue-cli，但我觉得如果没有任何的依据凭自己写一个项目(包括webpack的配置等)这无疑是浪费时间的而且都最...
vue项目打包后，打开页面为空白的解决办法
m0_51060602的博客
03-10 1万+
vue项目打包上线后，出现空白页面的解决办法
Vue 打包，放到服务器的问题 总结
lhb_11的博客
03-06 2万+
Failed to load resource: net::ERR_FILE_NOT_FOUND或者vue dist文件下的index.html没显示 vue-cli npm run dev 可以看到，但是通过dist文件下的index.html直接打开没显示，没看到 知乎上：webpack.prod.conf.js 中output添加参数publicPath:'./' 具体： ...
vue项目打包后首页一片空白解决办法和具体原因总结
热门推荐
吹过麦田的风的专栏
08-20 3万+
很高兴在万千文章中你看到本章，希望能为你解决问题！！！ 在最初用vue+webpack+vue-router做项目的时候，在本地pc开发测试都是正常的，但是在把代码打包部署到测试服务器之后，访问项目首页总是白屏。 第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。 解决办法：修改一下config下面的index.js中bulid模块导出的路径。因为index.h...
Vue 项目部署时静态资源找不到的解决方法
"Vue 项目中 webpack build 静态资源找不到的解决方法" 在 Vue 项目中，使用 Vue CLI 搭建的项目，在本地测试和调试都没有问题，但是在服务器上部署时，静态资源找不到，这个问题是怎么回事？今天，我们将探索这个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值