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. C++通配符

    #include<iostream>using namespace std;bool PathernMatch(char *pat, char *str){ char *s = NULL; ...

  2. Leetcode884.Uncommon Words from Two Sentences两句话中的不常见单词

    给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回所有不常用单 ...

  3. Leetcode867.Transpose Matrix转置矩阵

    给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引. 示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]] 输出:[[1,4,7] ...

  4. 阿里工程师开发了一款免费工具,提升Kubernetes应用开发效率

    对于使用了Kubernetes作为应用运行环境的开发者而言,在同一个集群中我们可以使用命名空间(Namespace)快速创建多套隔离环境,在相同命名空间下,服务间使用Service的内部DNS域名进行 ...

  5. 跨域知识(二)——JSONP

    JSONP是服务器与客户端跨源通信的常用方法.最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小. 它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据, ...

  6. Codeforces 13C

    这题纠结了近半年,一直没有好的思路. 刚开始看这题的时候就是暴力,明显的TLE 后来才知道这题的“一种解”肯定是"原数列中某些数的集合" (很明显这题的最优策略并不唯一) 有原数列 ...

  7. 【python练手】获取城市天气质量

    #!/usr/bin/python # -*- coding: utf-8 -*- # get city pm2.5 and ranking # python2.7 import sys import ...

  8. SPSS详细操作:生存资料的Cox回归分析

    SPSS详细操作:生存资料的Cox回归分析 一.问题与数据 某研究者拟观察某新药的抗肿瘤效果,将70名肺癌患者随机分为两组,分别采用该新药和常规药物进行治疗,观察两组肺癌患者的生存情况,共随访2年.研 ...

  9. Nginx教程(6) 动静分离架构 (转)

    一.原理 Nginx 动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,可以理解成使用Nginx 处理静态页面,To ...

  10. Directx教程(23) 简单的光照模型(2)

    原文:Directx教程(23) 简单的光照模型(2)    在工程myTutorialD3D11_16中,我在文件light.vs中定义了一个材质光源属性常量缓冲. //const buffer最好 ...