解决vue项目 build之后资源文件找不到的问题


Posted in Javascript onSeptember 12, 2020

解决静态资源失效的问题

这就需要修改我们的 config 中的 index.js了,默认的build 中的部分是这样的:

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',

修改之后的应为这样的:

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',

但是这样能确保资源文件可被正常找到, 但页面还是处于白屏状态,

在路由页面找到mode: 'history',

export default new Router({
 mode: 'history',
 routes: [

将mode: 'history',这句话删除,在进行build,

export default new Router({
 // mode: 'history',
 routes: [

小伙伴们, 是不是发现好用啦~

补充知识:vue关于build和config文件都已修改,但打包后图片仍找不到的问题

最开始发现有的图片可以加载出来有的却不能,然后去看build和config文件的配置,

解决vue项目 build之后资源文件找不到的问题

解决vue项目 build之后资源文件找不到的问题

都很ok啊。

然后去看那些可以加载出来的跟不能加载的做了对比,发现不能加载出来的都是把路径写在js里面,用变量的方式写进html里面的,最后的解决方式就是:

//以require形式导入图片

url:require('../../static/xxx.png')

然后打包就没问题了;

后面再补充一下,background属性引入图片的话如果以行内元素引入也会造成图片路径找不到的情况,解决的办法就是把它写在style里面,以类名的方式引入;

总结一下,vue里面引用图片在打包后仍能正常使用的正确引用方式:

html内:img src以相对路径引入;

css:style以background属性作为背景图片引入,需以类名方式引入,行内样式可能会不生效;

js:以require('…/url')引入,赋予变量;

以上这篇解决vue项目 build之后资源文件找不到的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 #Javascript
vue v-on:click传递动态参数的步骤
Sep 11 #Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 #Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 #Javascript
请求时token过期自动刷新token操作
Sep 11 #Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 #Javascript
Vue axios获取token临时令牌封装案例
Sep 11 #Javascript
You might like
基于php-fpm 参数的深入理解
2013/06/03 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
python单线程实现多个定时器示例
2014/03/30 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
早餐连锁店计划书
2014/01/08 职场文书
工程承包协议书
2014/10/20 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2014年采购工作总结
2014/11/20 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书