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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 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
php cout<<的一点看法
2010/01/24 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python读取word文档的方法
2015/05/09 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python Paramiko使用示例
2020/09/21 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
服装创业计划书范文
2014/02/05 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
工作态度检讨书范文
2015/05/06 职场文书
单位综合评价意见
2015/06/05 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis