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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
原生js+canvas实现下雪效果
Aug 02 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
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
js中this的用法实例分析
2015/01/10 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python调用API实现智能回复机器人
2018/04/10 Python
儿童python练习实例
2018/05/27 Python
python读写csv文件方法详细总结
2019/07/05 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
pandas 数据类型转换的实现
2020/12/29 Python
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
简单的辞职信范文
2014/01/18 职场文书
优秀教师事迹简介
2014/02/02 职场文书
医学类个人求职信范文
2014/02/05 职场文书
党课培训心得体会
2014/09/02 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
宣传委员竞选稿
2015/11/19 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python