1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的,而你的路径不对,打开肯定是空白的。先看一下默认的路径。

assetsPublicPath默认的是  ‘/’  也就是根目录。而我们的index.html和static在同一级目录下面。  所以要改为  ‘./ ’

2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。

vue项目打包后打开空白解决办法的更多相关文章

  1. vue项目打包之后页面空白解决办法

    之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ...

  2. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  3. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  4. vue项目打包后想发布在apache www/vue 目录下

    使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...

  5. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

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

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

  7. vue项目打包后在IE浏览器报错,页面显示空白

    之前写一个项目,一直放在谷歌浏览器调试测试,到尾声时放到IE浏览器结果直接白屏,页面打不开 找了网上的方法,加了babel-polyfill插件后还是不行,后来排查发现是打包插件出了问题,因为用的项目 ...

  8. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  9. vue项目打包后图片路径问题

    当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run build : 打 ...

随机推荐

  1. nutzboot 项目打包排除或指定配置文件(夹)

    springboot 是一样的 我这里就是从springboot哪里拿过来的 (nutzboot2.x已测试可以使用) 排除指定文件 在pom 文件 build 标签内添加 resources < ...

  2. [LC] 117. Populating Next Right Pointers in Each Node II

    Given a binary tree struct Node { int val; Node *left; Node *right; Node *next; } Populate each next ...

  3. @EnableWebMvc WebMvcConfigurer CorsConfig

    package me.zhengjie.core.config; import org.springframework.context.annotation.Configuration; import ...

  4. 简化Java编程的法宝,让工作更高效

    如果你没有看过之前的文章,也不要紧,这并不影响你对接下来的内容的理解,不过为了照顾直接看到第二篇的同学,还是有必要介绍一下HuTool的引入方式. 在项目的pom.xml的dependencies中加 ...

  5. 利用Python进行图片发送与接收的两种方法---包含客户端和服务器端代码

    第一种方法 opencv.requests.flask 此方法比较耗费时间 600毫秒左右 客户端代码 #coding:utf-8 import cv2 import json import requ ...

  6. Java捕获并处理线程失败抛出的异常

    使用 UncaughtExceptionHandler 示例代码如下: Thread.UncaughtExceptionHandler handler = new Thread.UncaughtExc ...

  7. 读书笔记之 数字图像处理的MATLAB实现(第2版)

  8. python标准库:ftplib模块

    ftplib模块包含了文件传输协议(FTP)客户端的实现. 下面的例子展示了如何登入和获取进入目录的列表,dir函数传入一个回调函数,该回调函数在服务器相应时每一行调用一次.ftplib模块默认的回调 ...

  9. Android中的AlertDialog和ProgressDialog用法

    手机APP对话框是很多APP都有的下面来看下怎么实现的吧, 打开Android studio 然他自动创建好布局和类; 下面我们修改activity_main.xml中的代码 <?xml ver ...

  10. 主成分分析(PCA)模型概述

    数据降维 降维是对数据高维度特征的一种预处理方法.降维是将高维度的数据保留下最重要的一些特征,去除噪声和不重要的特征,从而实现提升数据处理速度的目的.在实际的生产和应用中,降维在一定信息损失范围内,可 ...