最近用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 页面空白的更多相关文章

  1. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  2. 学习笔记-vue 打包去#和页面空白问题

    文件资源路径是对的,但是页面空白.百度了很久找了一篇文章解决了. 1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html ...

  3. vue项目打包文件配置（vue-clli3）

    练手项目完结打包的时候遇到一些问题,特此记录 先贴我的vue.config.js文件的代码(vue-cli3构建的项目默认是没有此文件的,需手动添加)更多详细配置参考官方配置文档,我的项目不大不小,这 ...

  4. vue项目打包后一片空白及资源引入的路径报错解决办法

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...

  5. vue webpack打包

    webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配 ...

  6. vue hash模式和404页面的配置

    1.设置我们的路由配置文件(/src/router/index.js): { path:'*', component:Error } 这里的path:’*’就是找不到页面时的配置,component是 ...

  7. Vue+webpack配置实现多页面应用开发

    为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代 ...

  8. 成功解决react+webpack打包文件过大的问题

    最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...

  9. webpack打包文件中的@符号表示什么意思

    在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号 import one from '@/views/one.vue' 那这里的@符号到底表示什么意思呢? 这其实利用了webpack ...

随机推荐

  1. JavaScript 函数作用域的“提升”现象

    在JavaScript当中,定义变量通过var操作符+变量名.但是不加 var 操作符,直接赋值也是可以的.例如 : message = "hello JavaScript ! " ...

  2. 深入理解iPhone数据持久化(手把手教你iphone开发 – 基础篇)

    在所有的移动开发平台数据持久化都是很重要的部分:在j2me中是rms或保存在应用程序的目录中,在symbian中可以保存在相应的磁盘目录中和数据库中.symbian中因为权限认证的原因,在3rd上大多 ...

  3. Leetcode第1题至第10题 思路分析及C++实现

    笔者按照目录刷题,对于每一道题,力争使用效率最高(时间复杂度最低)的算法,并全部通过C++代码实现AC.(文中计算的复杂度都是最坏情况复杂度) 因为考虑到大部分读者已经在Leetcode浏览过题目了, ...

  4. 基于 orange(nginx+openresty) + docker 实现微服务 网关功能

    摘要 基于 orange(nginx+openresty) + docker 实现微服务 网关功能 ;以实现 docker 独立容器 来跑 独立语言独立环境 在 同一个授权下 运行相关组合程序..年初 ...

  5. setState 是异步的

    1.解决 setState 异步问题 // 查询 handleSearch(e){ // 禁止默认行为 e.preventDefault(); // 获取 form 表单的值 this.setStat ...

  6. 一个TAB的jquery简单写法

    <style> .honver{ color:red;} </style><script src="../js/jquery-1.9.0.min.js" ...

  7. MongoDB：分片（简介 & 自动分片 & 片键）

    分片(增加服务器,水平扩展)是MongoDB的扩展方式,通过分片能过增加更多的机器来应对不断增加的负载和数据,还不影响应用. [简介] 分片(sharding)是指将数据拆分,将其分散存在不同的机器上 ...

  8. C#模拟登录Facebook 实现发送消息、评论帖子

    由于目前电脑网页版FB实现模拟登录比较困难,本次选择了FB的手机版页面进行登录 MVC: private static string UserName = "用户名"; priva ...

  9. 简单使用 Mvc 内置的 Ioc

    简单使用 Mvc 内置的 Ioc 本文基于 .NET Core 2.0. 鉴于网上的文章理论较多,鄙人不才,想整理一份 Hello World(Demo)版的文章. 目录 场景一:简单类的使用 场景二 ...

  10. Android用户界面设计：基本button

    Android用户界面设计:基本button 本文向你展示了在你的Android应用程序中创建一个简单的Button或ImageButton控件的步骤. 首先.你会学到怎样向你的布局文件里加入butt ...