vue-cil 打包爬坑(解决)

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‘,//将这个模式关闭就好

原文地址:https://www.cnblogs.com/LindaBlog/p/11152664.html

时间: 2024-10-07 19:39:42

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

vue项目打包踩坑记

基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目,即通过vue init webpack初始化的项目才可以,通过vue init webpack-simple初始化的项目没有打包文件,无法打包.目录结构如下 vue init webpack初始化的目录结构,打包依赖build和config文件夹的配置,static存放静态文件 vue init

vue项目实战爬坑小记002

1.如何使用vuex来保存数据(需要传参的情况下) 实例说明:登录->缓存用户信息->跳转到首页->从state获取用户信息显示在页面上 step1: 新建store.js作为初始化vuex的主文件,可在里面创建state对象,缓存数据字段,初始化vuex, 目录结构如下: store.js代码如下: 1 import Vue from 'vue'; 2 import Vuex from 'vuex'; 3 import * as actions from './actions'; 4

vue项目实战爬坑小记003

太久没更新了.其实期间遇到了很多问题,都想着来整理和记录一下.可能是懒癌发作了吧,一直没动手记录.今天突破懒癌,重新来记录一波~~ 页面上如果要显示可编辑的保留数据格式的文本,可以有2种方式: 1. textarea标签中直接插入该数据的对象格式.有一个需要注意的坑是:如果修改里面的内容,容器不重绘的话,多个切换的时候内容不会变!!! 应该有人会吐槽: 不会用v-model 吗?小菜鸡~~~ 如果用了,确实能响应,但是不会显示这个格式, 而且如果直接绑定对象,就只会显示object文本. 1 <

vue 爬坑之路---can&#39;t resolve &#39;sass-loader&#39;

环境设置好以后 本以为可以开心的写代码了, 谁料到如下报错,大概意思就是不能编译 sass-loader 这个玩意. 那怎么办?? 安装依赖,不然能怎么办? 第一个依赖: npm install sass-loader 第二个依赖: npm install node-sass 这样安装了之后,然后npm run dev  ,世界一片祥和~ vue 爬坑之路---can't resolve 'sass-loader' 原文地址:https://www.cnblogs.com/liuguoying/

vue项目打包部署-----解决打包后访问资源失败问题

vue项目打包部署-----解决打包后访问资源失败问题. 本文链接:https://blog.csdn.net/kaola_l/article/details/80497490 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找

微信小程序爬坑日记

新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只有项目才是实践学习的根本:二来刚出来,总是有很多坑.爬坑总是痛并快乐着. 再多的借口,产品项目需求拍在桌前,都得缴械投降.不要怂撸起袖子,就是干. 初识小程序 微信推出小程序,想要实现即开即用,用完即走的用户体验.免去APP下载安装繁琐的流程.听起来像谷歌推出的PWA,不过PWA普及到国内还有段时间.而小程序

Tinker + Bugly + Jenkins 爬坑之路

前阵子 Android 端的线上崩溃比较多,热修复被提上日程.实现方案是 Tinker,Jenkins 打包,最后补丁包上传到 Bugly 进行分发.主要在 Jenkins 打包这一块爬了不少坑,现记录下来,供大家参考. 1. Tinker + Bugly热修复实现 首先是本地实现,按照官方文档,只要一步一步按照文档来,这个步骤还是比较容易的,这里就不再赘述了,不懂的可以先参考官方文档:Bugly Android热更新使用指南.Bugly Android热更新详解.这里贴一下接入流程: 打基准包

使用HBuilderX将vue项目打包成app

因为项目要用到手机扫一扫的功能,纯H5的话我百度之后只能做到调用摄像头,拍照后识别二维码,无法做到自动识别 看到H5+有扫码功能,所以今天尝试用HBuilderX将vue项目打包成app 总的流程很简单,这真的要感谢H5中国产业联盟做出的贡献.将vue打包,生成dist文件夹,HBuilderX创建H5+App项目,这里选择的是默认模版,然后将dist里的文件夹覆盖到新项目,就可以云打包成app下载到手机或者直接进行真机调试 生成app后遇到的第一个坑就是白屏,原因是页面找不到 为了解决跨域问题

安卓易学,爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest.qq.com/cube立即体验! 作者:Hoolly,腾讯移动客户端开发工程师. 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处 WeTest导读 安卓开发者都知道,RecyclerView比ListView要灵活的多,但不可否认的里面的坑也同样埋了不少人.下面让我们看看腾讯开发工程