解决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 globalStorage类代码
Jun 04 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
原生JS实现无缝轮播图片
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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
Python入门篇之字符串
2014/10/17 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python线程中的同步问题及解决方法
2019/08/29 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
幼儿园教师个人反思
2014/01/30 职场文书
学期评语大全
2014/04/30 职场文书
企业环保标语
2014/06/10 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
JavaScript的Set数据结构详解
2022/02/18 Javascript