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支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
详解iframe与frame的区别
Jan 13 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python API自动化框架总结
2019/11/12 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
英语故事演讲稿
2014/04/29 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
讲文明倡议书
2015/04/29 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js