距离上一期,时间间距可能有点长。谁让本人处于兴奋状态,生活已经不能自理。

哈哈哈,嗯,正经一下, 在已有的经验里总结一下那些容易抓狂的坑!

起因:npm run build 打包 本地运行,你以为可以看到 完美的效果

没有!什么也没有

背景:npm run dev 正常可见图:

先对项目打包:npm run  build ,打包好之后 就会多一个文件夹“dist”  在里面找到index.html 运行就行了(简单吧)

看它不爽的人,注释掉就没有了

萝卜坑一:看到以下报错:未找到css,js 路径

不要着急,

修改 config文件中的index.js文件中的 build中的assetsPublicPath属性值 由‘/’修改为‘./’ 绝对路径改为相对路径。这网上都有 基本的解决方法。
 

再打包一次 ,运行index就可以了。

萝卜坑二:

遇到这种情况是不是很气,你有报错就算了  我还知道该改哪里,这算啥。

查找一下资料,终于找到问题了。问题出现在路由,简直是日了狗了。

原因:

虽然使用这种模式之后,就没有#了,但是这种模式要后台配置支持。本地运行,在没有后台配置的情况下,页面将一片空白。
再次运行就可以了。

 
萝卜坑三:
(注:在npm run dev 的时候,就一片空白也没有报错的情况)
是不是很神奇,啥也没有报错,但是就觉得没问题,也没改了什么。

图就跟上图一样,没报错一片空白。

后来意外找到原因:

有需要监听路由变化的时候 就有以上的代码: 没注意 就感觉没问题,其实少了next()。

正常的是这样的:

什么也不想说。 让我安静一会。

对了还有 如果npm run build 打包好后找不到图片等问题。大概是 这手脚架已经规范好了图片该放的位置 ,可修改,别问我在哪里 ,我也不知道 没去研究。

综上所述:是我做项目的所记录的问题,没有更多了,等我老了 应该就有了。

vue2.0 带头冲锋(打包时,小心萝卜坑)的更多相关文章

  1. vue2.0 带头冲锋(先穿鞋)

    事先说明:这次截图纯手工敲打,可不容易了.刚学会站直,不穿鞋,不得直接摔个狗食屎.(皮糙肉厚也顶不住啊). 废话不多了 !开始学基础.学过anguler1.0 ,会比较容易学vue. 溶解使用的是 v ...

  2. react-native-echarts在打包时出现的坑

    react-native-echarts目前是RN开发中使用echarts图表最好的插件了,用法与Echarts完全一致,默认提供了三个属性: option (object): The option ...

  3. vue2.0+mintui+hbuilder 打包移动端app之后出现空白页面的解决方案

    1.首先使用的是vue-cli构建的页面,用hbuildX打包成移动端的安装包(hbuildX打包成app的流程,请看自行搜索) 2.cnpm install build 生成dist文件夹,里面包含 ...

  4. vue2.0实现页面刷新时某个input获得focus

    通过自定义指令:

  5. vue2.0配置路由

    配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...

  6. vue2.0中动画

    #vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...

  7. vue2.0那些坑之使用elementUI后v-on:click事件不生效问题

    最近在维护vue2.0的项目,遇到了不少坑,在这里说下引用elementui之后,使用v-on:click绑定点击事件无效的情况,如下图: 我想阻止冒泡事件,发现无效.这里将@click换成了@cli ...

  8. 如何解决vue2.0 打包之后 打开index.html出现空白页

    如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件       1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 ...

  9. vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效解决方法

    我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-uplo ...

随机推荐

  1. 云计算 --> 三种服务模式IaaS,PaaS,SaaS

    三种服务模式IaaS,PaaS,SaaS “云”其实是互联网的一个隐喻,“云计算”其实就是使用互联网来接入存储或者运行在远程服务器端的应用,数据,或者服务.任何一个使用基于互联网的方法来计算,存储和开 ...

  2. STL --> deque双向队列

    deque简介 deque是双向开口的连续性存储空间.虽说是连续性存储空间,但这种连续性只是表面上的,实际上它的内存是动态分配的,它在堆上分配了一块一块的动态储存区,每一块动态存储去本身是连续的,de ...

  3. java排序算法(一):概述

    java排序算法(一)概述 排序是程序开发中一种非常常见的操作,对一组任意的数据元素(活记录)经过排序操作后,就可以把它们变成一组按关键字排序的一组有序序列 对一个排序的算法来说,一般从下面三个方面来 ...

  4. Matlab绘图基础——绘制三维曲线

    %% 绘制三维曲线 %plot3函数,其中每一组x,y,z组成一组曲线的坐标参数,选项的定义和plot函数相同. %1.当x,y,z是同维向量时,则x,y,z 对应元素构成一条三维曲线. x0 = 0 ...

  5. [bzoj1026][SCOI2009]windy数_数位dp

    windy数 bzoj-1026 题目大意:求一段区间中的windy数个数. 注释:如果一个数任意相邻两位的差的绝对值都不小于2,这个数就是windy数,没有前导0.$区间边界<=2\cdot ...

  6. git解决修改代码后无法push的问题failed to push some refs to 'ssh://git@xxx.xxx.xx/xx.git'

    今天在使用git提交代码的时候,犯了个很低级的错误,按照一切流程当我add并commit提交代码,最后使用push到远程仓库, 接下来奇怪的事情发生了,push之后,查看远程仓库代码并没有发现提交记录 ...

  7. 解决Hash碰撞冲突方法总结

    Hash碰撞冲突 我们知道,对象Hash的前提是实现equals()和hashCode()两个方法,那么HashCode()的作用就是保证对象返回唯一hash值,但当两个对象计算值一样时,这就发生了碰 ...

  8. 2018.3.29 div格式设置

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  9. iOS开发UIKit框架-可视化编程-XIB

    1. Interface Builder 可视化编程 1> 概述 GUI : 图形用户界面(Graphical User Interface, 简称GUI, 又称图形化界面) 是指采用图形方式显 ...

  10. ord在python是什么意思?

    >>> help(ord)Help on built-in function ord in module builtins:ord(...) #这是一个函数 ord(c) -> ...