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 对象、函数和继承
Jul 07 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
python解析html开发库pyquery使用方法
2014/02/07 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python对象与引用的介绍
2019/01/24 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
办公室副主任岗位职责
2013/11/25 职场文书
信息管理应届生求职信
2014/03/07 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
商业用房租赁协议书
2014/10/13 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫