vue+webpack 打包文件 404 页面空白
最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下:
vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行,
例如 :nginx
vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html
1 刷新页面404

配置启动文件的index页面的路径root: D:/workPlace/mex-adx-web/mex-adx-web/dist
2 二级页面刷新报错:
打包的项目静态资源的路径需要设置为绝对路径。如果是相对路径会出错
config-index.js 
3 :项目运行没有问题,但是打包之后运行文件报错
Unexpected token:`。。。
需要单独配置babel,将配置放到文件.babelrc中:

vue+webpack 打包文件 404 页面空白的更多相关文章
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- 学习笔记-vue 打包去#和页面空白问题
文件资源路径是对的,但是页面空白.百度了很久找了一篇文章解决了. 1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html ...
- vue项目打包文件配置(vue-clli3)
练手项目完结打包的时候遇到一些问题,特此记录 先贴我的vue.config.js文件的代码(vue-cli3构建的项目默认是没有此文件的,需手动添加)更多详细配置参考官方配置文档,我的项目不大不小,这 ...
- vue项目打包后一片空白及资源引入的路径报错解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...
- vue webpack打包
webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配 ...
- vue hash模式和404页面的配置
1.设置我们的路由配置文件(/src/router/index.js): { path:'*', component:Error } 这里的path:’*’就是找不到页面时的配置,component是 ...
- Vue+webpack配置实现多页面应用开发
为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代 ...
- 成功解决react+webpack打包文件过大的问题
最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...
- webpack打包文件中的@符号表示什么意思
在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号 import one from '@/views/one.vue' 那这里的@符号到底表示什么意思呢? 这其实利用了webpack ...
随机推荐
- vSphere 6.5 新功能 (7) - 支持 512e 硬盘
2016-12-11 Newton 长期以来,机械硬盘在储存数据时,一直都是以 512 byte 大小的扇区(Sector)为单位分割进行读写.随着硬盘容量的不断提升,这种古老的分配标准已经越来越不合 ...
- Java中的Copy-on-Write容器 & ConcurrentHashMap & HashTable比较
参考这篇文章:Link 从JDK1.5开始Java并发包里提供了两个使用CopyOnWrite机制实现的并发容器,它们是CopyOnWriteArrayList和CopyOnWriteArraySet ...
- Codeforces Round #266 (Div. 2) C. Number of Ways
You've got array a[1], a[2], ..., a[n], consisting of n integers. Count the number of ways to split ...
- Java笔试面试题007
Java笔试面试题007 1.请用正則表達式匹配出QQ号(如果QQ号码为5-10位). 解答: ^ \d{5,10}$ 2.String, StringBuffer StringBuilder的差别. ...
- BUPT复试专题—网络的核(2014)
题目描述 给定一个无向网络G,共有N个节点(1到N),M条边,求网络的核. 网络的核:到网络中其他节点距离之和最小的节点,且对于不连通的两点,他们之间的距离为N,若有多组解,输出编号最小的节点 输入 ...
- 百度云分享文件自己设置password
我们在用百度云分享的时候都是百度云随机给我们生成的password.我们能够通过以下的一条js脚本代码来自己定义百度云分享password javascript:require(["func ...
- mmall 项目实战(一)项目初始化
1.创建 数据库 及 表 数据脚本: /* Navicat Premium Data Transfer Source Server : 182.92.82.103 Source Server Type ...
- Android中View自己定义XML属性具体解释以及R.attr与R.styleable的差别
为View加入自己定义XML属性 Android中的各种Widget都提供了非常多XML属性,我们能够利用这些XML属性在layout文件里为Widget的属性赋值. 例如以下所看到的: <Te ...
- minimum-depth-of-binary-tree——二叉树遍历、链表、广度优先
Given a binary tree, find its minimum depth.The minimum depth is the number of nodes along the short ...
- DataGuard备库ORA-01196故障恢复一则
问题现象 在使用shutdown abort停DataGuard备库后.备库不能open,报ORA-01196错误. 详细例如以下: 发现一备库不能应用日志.查看备库日志没发现报错.怀疑是备库应用日志 ...