vue+webpack 打包文件 404 页面空白的解决方法


Posted in Javascript onFebruary 28, 2018

最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下:

vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行,

例如 :nginx

vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html

1 刷新页面404

vue+webpack 打包文件 404 页面空白的解决方法

配置启动文件的index页面的路径root: D:/workPlace/mex-adx-web/mex-adx-web/dist

2 二级页面刷新报错:

打包的项目静态资源的路径需要设置为绝对路径。如果是相对路径会出错

config-index.js

vue+webpack 打包文件 404 页面空白的解决方法

3 :项目运行没有问题,但是打包之后运行文件报错

Unexpected token:`。。。

需要单独配置babel,将配置放到文件.babelrc中:

vue+webpack 打包文件 404 页面空白的解决方法

以上这篇vue+webpack 打包文件 404 页面空白的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 #Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 #Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 #Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 #Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 #Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 #Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 #Javascript
You might like
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php array_filter除去数组中的空字符元素
2020/06/21 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
python监控键盘输入实例代码
2018/02/09 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
keras打印loss对权重的导数方式
2020/06/10 Python
渗透攻击的测试步骤
2014/06/07 面试题
小学运动会班级口号
2014/06/09 职场文书
内科护士节演讲稿
2014/09/11 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
立项申请报告范本
2015/05/15 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS