1、打包成功不报错,但是打开页面啥都没有?
 解决:文件位置:config目录下index.js文件更改assetsPublicPath属性:文件里面有两个assetsPublicPath属性,也就是更改build里面的assetsPublicPath属性:(加上点)
assetsPublicPath:'/'替换成
assetsPublicPath:'./'

 
2、打包完成后某些图片没加载出来,f12提示404,且dist文件下的static文件夹下有一个img文件夹?

原因:图片过大或者资源文件过大、超过了打包规定的限制;

解决:修改build目录下面的webpack.base.conf.js文件下的limit限制,超过你使用到的最大图片资源即可。

 
 
3、每个js和css文件会压缩一个gz后缀的文件夹,浏览器如果支持g-zip 会自动查找有没有gz文件 找到了就加载gz然后本地解压 执行。依赖:
 
npm install --save-dev compression-webpack-plugin
 
4、包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。最后你在build之后,然后就会发现就没有自动生成一些map文件了。。。
 
解决:修改config下面的index.js文件夹,
productionSourceMap: true;改为productionSourceMap: false,

 
5、打包后运行项目:刷新界面会出现404?
解决:router目录下的index.js文件,
 mode: 'history',//将这个模式关闭就好

vue-cil 打包爬坑(解决)的更多相关文章

  1. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

  2. vue项目打包踩坑记

    基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目 ...

  3. 配置使用sourcemap调试vue源码爬坑

    环境: Google Chrome  V72.0.3626.109 vue-dev V 2.6.10 爬坑的乐趣就不说了(我恨啊),以下说一下出坑要点 1. 在vue-dev的package.json ...

  4. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  5. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  6. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  7. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  8. Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)

    最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...

  9. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

随机推荐

  1. java 4对象群体的组织

    两个接口 collecion接口 元素构成的元素的群体 map接口 键值对组成的群体 Array类 Vector ArrayList 在数组上构建的类 Java集合框架介绍 集成过得数据结构 查询方法 ...

  2. js自定义滚动条

    今天听到别人说自定义滚动条,所以就在吃饭的时间写了个 html部分 <div class="out" id="out"> <div class ...

  3. 2018-12-29-WPF-如何建立自己的-3d-gis-程序

    title author date CreateTime categories WPF 如何建立自己的 3d gis 程序 lindexi 2018-12-29 14:11:11 +0800 2018 ...

  4. shell学习(23)- diff和patch

    diff命令可以生成两个文件之间的差异对比. (1) 先创建下列用于演示的文件.文件 1:version1.txt this is the original text line2 line3 line ...

  5. N!分解素因子及若干问题【转载】

    这里写的非常好http://www.cnblogs.com/openorz/archive/2011/11/14/2248992.html,感谢博主,我这里就直接用了. 将N!表示成 N! = p1^ ...

  6. [已转移]IE事件流和DOM标准事件流的区别

    该文章已转移到博客:https://cynthia0329.github.io/ 1.执行的顺序不一样 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型 ...

  7. 使用 git 来管理 PCB 版本

    使用 git 来管理 PCB 版本 在传统的 PCB 版本管理是复制一份,再重命名,写上日期,写上修改日志. 自从接触了 git 后,发现 git 的版本管理完全可以胜任,且可以做的更好. 原来使用商 ...

  8. 阿里云OSS同城冗余存储技术解析

    一.背景 近年来,面对数字化转型带来的挑战,越来越多的企业开始将关键业务系统上云,也有更多的业务创新在云上,帮助企业实现业务增长,这些数据已经成为企业最重要的资产.资源.对于企业来说,如何确保宝贵的数 ...

  9. SaaS加速器II 能力中心:互利互补 共享商业红利

    摘要: 通过丰富的阿里集团和三方的业务能力API,缩短业务从0-1构建的周期和降低成本,我们希望能够把阿里巴巴在电商.金融.物流.高德以及其他领域沉淀出来商业最佳实践.商业能力,通过阿里云的渠道输出, ...

  10. UVa 825【简单dp,递推】

    UVa 825 题意:给定一个网格图(街道图),其中有一些交叉路口点不能走.问从西北角走到东南角最短走法有多少种.(好像没看到给数据范围...) 简单的递推吧,当然也就是最简单的动归了.显然最短路长度 ...