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 相关文章推荐
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
原生js实现日期联动
2015/01/12 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python实现百度语音识别api
2018/04/10 Python
python 公共方法汇总解析
2019/09/16 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Pycharm github配置实现过程图解
2020/10/13 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
电影开国大典观后感
2015/06/04 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
Redis入门基础常用操作命令整理
2022/06/01 Redis