VUE打包发布后无法访问js、css资源

最新推荐文章于 2023-12-11 15:05:17 发布
最新推荐文章于 2023-12-11 15:05:17 发布
阅读量2k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Miracle-ZLZ/p/10136013.html
版权

　　在vue开发中，本地测试以及测试环境中都没有遇到问题，当发布生产，有虚拟路径时，便出现js、css均报错404；

　　首先在config的index.js文件中，将assetsPublicPath修改为'./'，如下图；

　　

　　然而打包发布后发现放在assets文件夹中的图片资源又报404，观察那个路径，发现多了一层statics/css/img的路径，我们要找到build文件中的utils.js，在如下所示地方新增一条publicPath为'../../'；

　　

　　重新打包发布，正常运行！

　　

转载于:https://www.cnblogs.com/Miracle-ZLZ/p/10136013.html

weixin_30912051
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2/3 - 打包出现报错：ERROR in static/js/xxx.js from UglifyJs Unexpected token: name(toSJISFunction)完美解决!
高级前端工程师
03-01 2447
vue，vue2打包报错，vue3打包时报错，npm run build，无法打包怎么办，打包时出现报错ERROR in static/js/xxx.js from UglifyJs Unexpected token: name(toSJISFunction)如何解决，如何解决build打包时出现报错，vue报错，解决报错，终端提示错误，浏览器报错，vue如何解决项目最终打包时出现报错，vue3 build打包报错，vue2执行biuld打包命令时报错，build打包命令，vue2/3 - 打包出现报错：E
解决Vue打包后访问图片/图标不显示的问题
01-19
大家可否遇到过 npm run build 打包后，项目在线上运行时，资源文件 (图片、图标)不显示 的问题， 接下来，我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕，因为都是打包压缩过...
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容： ... module.exports = { baseUrl: isProd ? '/baseXXX/' : '/', .... } 这里需要注意的是 dev 环境下不需
vue打包js报错问题（低版本浏览器白屏）
Deleven_Blog的博客
04-01 1523
具体情况 在使用vue开发完成之后进行项目打包时，打包后的项目使用高版本浏览器正常，使用低版本浏览器（或者较早的android系统）时出现白屏 报错内容 Uncaught SyntaxError: Use of const in strict mode. Uncaught TypeError: Cannot call method 'call' of undefined 解决方案 方案1 1、将...
vue项目打包后页面出现空白,css / js 文件访问不到
TVM的博客
10-29 2893
打包前在本地跑起来都没什么问题,但是打包之后dist扔到线上就访问不到,显示空白,有的css / js文件还显示404,访问不到. 首先,确认你的访问路径是对的 其次,将项目中config/index.js中 默认生成的assetsPublicPath只有/ , 前面加个 . 就好了 ...
【vue】vue打包项目线上爆出net::ERR_ABORTED 404 (Not Found)解决办法集合
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
12-22 5226
vue打包项目线上爆出net::ERR_ABORTED 404 (Not Found)解决办法集合
vue部署遇到的问题
诉与我听
07-30 171
问题：发布后请求cdn一直报 http 403错误，于是就换了自己服务器的cdn，至今不明白好好的别人的cdn怎么就不管用了???? 能外部引的JS就不要写在项目里，因为引入到工程中的所有js、css文件，编译时都会被打包。浏览器必须加载完所有js，才能开始显示首屏，会导致首屏加载速度奇慢。 所以，可以在index.html里面引入cdn形式的js、css文件 ...
vue 打包部署后打开网页空白，找不到css、js等资源
qq_40079749的博客
05-15 2036
vue 打包部署后打开网页空白，找不到css、js等资源 1、修改config文件夹下的index.js文件 build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './',//前面加上. produc
vue项目打包发布，页面出现空白，无法访问css/js文件
anwen743680的博客
11-15 2460
vue项目打包发布，找不到css和js资源
vue打包js和css404，存在缓存
小鄧同学的博客
08-05 1719
前言 当vue打包文件部署到线上时，会出现.js，.css文件404的情况，因为缓存原因，加载的js和css是之前的js和css，此文章用前端方法解决清除缓存的问题 1.index.html插入如下代码 <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> http-equiv
electron-vue-admin 打包请求反馈403
卉翊的博客
06-08 731
electron-vue-admin 请求反馈403
解决Vue打包上线之后部分CSS不生效的问题
12-13
首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils....
详解在vue-cli3.0中自定css、js和图片的打包路径
10-16
主要介绍了详解在vue-cli3.0中自定css、js和图片的打包路径，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决vue打包之后静态资源图片失效的问题
11-27
在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否...
【vue2】项目打包问题解决-js/css文件无法引用问题
Ma_Zhen_的博客
08-05 1664
使用vue-cil进行打包后，打开html文件，控制台报错，引入js/css文件失败。 （此项目没有创建多余文件，仅仅在index.html文件中引入了js和css文件）
vue项目本地正常运行，打包到线上时无法访问js等资源
最新发布
生而为人我很抱歉
12-11 1098
config/index.js文件的build/assetsPublicPath应该配置成和nginx（或tomcat）一致。
如何解决vue打包项目中的图片,静态css,js 不能访问路径问题
weixin_43962555的博客
02-22 1634
1.在书写代码的时候按照相对路径引入； 2. 但是webpack+vue-cli 默认打包的css,js 等资源的路径是绝对的； 实际写的代码 &amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;div class=&quot;logo&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;img src=&
vue-cli3.0打包页面无法加载js文件
otatoz
12-11 3614
使用 npm run build 打包后，浏览器访问dist/index.html文件时，无法加载js文件 解决方案： 在网上搜了很多方法，他们修改的配置文件都不适合vue-cli3.0，因为vue-cli3.0的目录结构如下： 此时需要自己新建一个文件：（根目录下新建vue.config.js） module.exports = { publicPath: './', ...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
热门推荐
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
vue打包后css路径_vue打包后引入js和css用相对路径引入
05-24
在 Vue 打包后，CSS 文件和 JS 文件都会被压缩并打包到 dist 目录下。因此，在引用这些文件时，我们需要使用相对路径来确保文件能够正确加载。 例如，在 index.html 中引入打包后的 CSS 和 JS 文件时，可以使用以下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值