关于vue-cli3打包代码后白屏的解决方案
前言 :
最近使用了vue-cli3.0 开发了一个移动网页端项目,准备打包发布了。按照以往的流程 npm run build
问题来了
打开 dist index.html 文件发现白屏。打开调试后 发现文件引用路径不对
根据以往的经验 根目录下新建 vue.config.js
配置 publicPath
module.exports = { ... runtimeCompiler: true, publicPath: './' ... }
满心欢喜的打开,结果还是白屏。打开调试发现文件路径是正确的,这就唧唧了!!。
发现问题
各种百度。发现了样的问题 一看vue-router的mode配置可能会影像打包后的链接地址,然后看看我自己的router:
var router = new Router({ mode: 'history' })
vue-router对mode的说明:
mode
类型: string
默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)
可选值: "hash" | "history" | "abstract"
配置路由模式:
hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。
history: 依赖 HTML5 History API 和服务器配置。
abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
解决问题
终于弄明白了,如果使用history模式上线,必须要服务端在服务器上有对应的模式才能使用history(看上面链接),如果服务器上没有配置,可以先使用默认的hash;
补充知识:vue打包项目以后白屏和图片加载不出来问题解决方法
vue打包项目以后部署访问白屏。查看控制台是404.这是由于打包的时候没有设置对静态资源路径。原文件是绝对路径,需要改成相对路径。
1.白屏修改config/index.js
2.图片加载不出来,修改build/utils.js
以上这篇关于vue-cli3打包代码后白屏的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue cli 3.0通用打包配置代码,不分一二级目录
1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修
-
vue cli3适配所有端方案的实现
应用场景 页面需要在pc端和移动端同时兼容,以前我的方案都是使用媒体查询来判断当前设备大小,然后写两套或者三套css代码来兼容他们,能达到目的,并且效果不错,但是感觉还是稍微麻烦了一丢丢.后面了解了一下flexable.js脚本,稍作修改,基本可以满足我的需求. postcss-px2rem yarn add postcss-px2rem postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件 // css相关配置 css:
-
vue cli3.0打包上线静态资源找不到路径的解决操作
项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require
-
彻底搞懂并解决vue-cli4中图片显示的问题实现
在基于 vue-cli 实际开发过程中,很多小伙伴都会遇到关于图片显示的困扰,不管怎么设置,图片就是显示不出来,今天我们来详细说说这个问题. 图片无法显示,绝大部门的情况是图片路径问题,要搞懂路径问题,分别有相对路径与绝对路径 实际开发中使用图片最多的场景有以下三种: 1.手动引入 <template> <img :src="imgurl" /> </template> <script> import logo from '../img/
-
关于vue-cli3打包代码后白屏的解决方案
前言 : 最近使用了vue-cli3.0 开发了一个移动网页端项目,准备打包发布了.按照以往的流程 npm run build 问题来了 打开 dist index.html 文件发现白屏.打开调试后 发现文件引用路径不对 根据以往的经验 根目录下新建 vue.config.js 配置 publicPath module.exports = { ... runtimeCompiler: true, publicPath: './' ... } 满心欢喜的打开,结果还是白屏.打开调试发现文件路径是
-
解决vue build打包之后首页白屏的问题
1.问题描述 本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏.有很多js,css无法加载. 2.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子. 再次执行 npm run build 就可以了. 以上这篇解决vue build打包之后首页白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue2.0使用过
-
vue 解决IOS10低版本白屏的问题
新公司是做自己的独立产品,比之前呆过的外包公司要求严格的多,注重用户体验,以下是在新项目里进行前端优化的一些操作 一,低版本空白屏问题,以及ios8的样式问题 本项目是通过vue-cli搭建,上线以后运行在新版本的苹果手机和安卓手机上均无问题.但是在ios8 9上出现了空白屏的原理,经过测试以后发现是低版本不兼容es6的语法,经过几番尝试找到了最优解. 1 空白屏问题 首先安装babel-polyfill,安装命令:npm install --save-dev babel-polyfill 安装
-
Vue Cli3 打包配置并自动忽略console.log语句的方法
下载插件 npm i -D uglifyjs-webpack-plugin 在 vue.config.js 引入使用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { drop_console: true, }, }, }), ],
-
vue项目打包发布后接口报405错误的解决
目录 vue项目打包发布后接口报405 vue项目打包之后接口出现错误问题 错误信息 关键代码 解决方式 vue项目打包发布后接口报405 vue项目前端做了代理打包后后台不识别报405 not allowed vue.config.js文件配置 devServer: { // host: "0.0.0.0", //项目运行时的本地地址 // port: 8880, // 端口号 //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为
-
部属vue项目,访问路径设置非根,显示白屏的解决方案
目录 vue访问路径设置非根显示白屏 解决 vue部署到非根目录设置 需要修改三处配置 vue访问路径设置非根显示白屏 问题: 访问页面,返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.” 环境: 使用nginx部属vue项目时,没有把访问项目设置为根路径 说明: 当访问项目对应的nginx配置没有给项目的访问路径设置为根时,页面显示白屏,在
-
vue项目打包部署后默认路由不正确的解决方案
目录 打包部署后默认路由不正确 问题描述 解决方案 vue打包后路径不对 对于背景图片不显示的问题 动画无法运行 小图标没了 打包部署后默认路由不正确 问题描述 vue项目本地开发的时候默认路由没问题,例如 redirect:"/index" 但是部署以后,服务器上默认路由不正确,现在遇到的问题是,会默认跳转到login页面,前提项目没有做路由权限. 解决方案 打开路由index.js文件,添加:base:"/" const routers = new Router
-
Flutter Android应用启动白屏的解决方案
目录 问题产生 如何解决 总结 问题产生 默认生成的flutter工程,在启动时候会白屏,设备性能越差,白屏时间越长.原生Android开发也会遇到类似问题,启动会产生白屏或者黑屏问题.在Android开发中通常是设置一个主题文件,这里不展开说. 如何解决 flutter其实已经提供了解决方案.打开flutter工程目录"\android\app\src\main"下的AndroidManifest.xml文件,可以看到如下内容: 这里英文的大意是:在flutter渲染第一帧之前,可以
-
vue.js打包项目后页面出现空白的解决办法
相信很多刚刚接触vue的伙伴会遇到这样的问题,就是说vue项目在开发环境下一切正常,但是打包之后,打开index.html页面却是一片空白,打开控制台发现这样的错误 出现这种情况要分两个处理方式(vue-cli2和vue-cli3),先说vue-cli2: 首先找到config/index.js文件,将assetPublicPath的路径改为"./"即可, vue-cli3的话要稍微麻烦些,因为vue-cli3简洁了许多,没有了配置文件,所以需要自己创建,只能在项目的根目录下创建,并且
-
vue项目打包之后背景样式丢失的解决方案
原始 build/untils.js 原因:至于为什么背景图有的打包后存在,有的丢失,那是因为vue会把图片转成base64,但是图片大小超过阈值就不转了,直接引,而背景图片里用的是相对路径最后会直接替换成static,但是明显路径会有问题,所以得配置下. 修改 需要在上面红框中添加下面语句: // 背景图片丢失:写改css中的路径(添加) publicPath: '../../' 然后重新npm run dev即可 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作
随机推荐
- AngularJS实现数据列表的增加、删除和上移下移等功能实例
- Java中String判断值为null或空及地址是否相等的问题
- PHP实现数字补零功能的2个函数介绍
- C++操作SQLite简明教程
- JavaScript设计模式学习之“类式继承”
- 进一步提高平台的安全性
- 详解java调用存储过程并封装成map
- Python获取脚本所在目录的正确方法
- yii2高级应用之自定义组件实现全局使用图片上传功能的方法
- Python抓取淘宝下拉框关键词的方法
- 简介Go语言中的select语句的用法
- 理解MySQL存储过程和函数
- Js实现动态添加删除Table行示例
- 关闭浏览器时提示onbeforeunload事件
- Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
- 使用python Django做网页
- MySQL中数据类型相关的优化办法
- Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
- 简单理解Java的抽象类
- android 调用系统的照相机和图库实例详解