解决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 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
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
Java中final关键字详解
2015/08/10 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
DOM 高级编程
2015/05/06 Javascript
jquery validate demo 基础
2015/10/29 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python如何读取文件中图片格式
2020/01/13 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
教师自我鉴定
2013/12/13 职场文书
人事主管岗位职责
2014/01/30 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
《锄禾》教学反思
2014/04/08 职场文书
项目合作协议书
2014/04/16 职场文书
北京奥运会主题口号
2014/06/13 职场文书
教师考核表个人总结
2015/02/12 职场文书