解决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 相关文章推荐
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
js+html制作简单验证码
Feb 16 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
JSON 数据格式详解
Sep 13 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
js实现html滑动图片拼图验证
Jun 24 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
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
理解JavaScript原型链
2016/10/25 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Python Cookie 读取和保存方法
2018/12/28 Python
在python 中实现运行多条shell命令
2019/01/07 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
一些.net面试题
2014/10/06 面试题
甲方资料员岗位职责
2013/12/13 职场文书
毕业生对母校寄语
2015/02/26 职场文书
学生会辞职信
2015/03/02 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android