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. JQuery--动画队列以及清空队列.stop()方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. MySQL数据库操作语句(cmd环境运行)

    一.开启MySQL服务器 1,  通过windows提供的服务管理器来完成 windows键+R 输入: services.msc 2.在本地服务中打开其服务 3.在DOC命令行下 net stop ...

  3. laravel 分页带参数

    {{$data->appends(request()->except(['page']))->links()}}

  4. 只在需要的时候 Polyfill 你的 JavaScript 代码

    本文转载自 Pascal Klau,他是一名来自德国南部的实习生,他讨厌不必要的 HTTP 请求,也不爱吃西兰花.Pascal 将说明使用 polyfill 服务的一种方式,在这种方式下你可能可以完全 ...

  5. bzoj1911 特别行动队

    Description Input Output Sample Input 4 -1 10 -20 2 2 3 4 Sample Output 9       斜率优化 推式子 #include< ...

  6. CDH5.13.1安装

    文件下载 Cloudera Manager 地址:http://archive.cloudera.com/cm5/cm/5/ 这里下载的是5.13.1的版本,https://archive.cloud ...

  7. 【算法】leetcode之 Palindrome Partitioning I&II(转载)

    1 Palindrome Partitioning 问题来源:Palindrome Partitioning 该问题简单来说就是给定一个字符串,将字符串分成多个部分,满足每一部分都是回文串,请输出所有 ...

  8. 【NS2】有线和无线混合场景 (转载)

    1. 创建简单的有线-无线混合场景 上一节建立的无线仿真可以支持多跳adhoc网络或wirelesslan.但是,我们可能需要对经过有线网络连接的多个无线网络进行仿真,或者说我们需要对有线-无线混合网 ...

  9. LeetcCode102 Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  10. Myeclipse 方法中文注释看不到

    参考以下几种解决方式: 1 改变整个文件类型的编码格式 1) eclipse->window->preferences->General->Content Types 2) 找 ...