解决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之HTMLCollection接口代码
Apr 27 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 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缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
js中function()使用方法
2013/12/24 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
javascript常用函数(1)
2015/11/04 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python中List.index()方法的使用教程
2015/05/20 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
客服文员岗位职责
2013/11/29 职场文书
幼师自我鉴定
2014/02/01 职场文书
公立医院改革实施方案
2014/03/14 职场文书
美容院店长岗位职责
2014/04/08 职场文书
师德师风建设方案
2014/05/08 职场文书
农民工讨薪标语
2014/06/26 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
2014年转正工作总结
2014/11/08 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS