vue-cli npm run build空白页的两个坑 webpack gzip文件压缩优化打包文件

简介: npm run build 是vue-cli用来打包项目的命令行,本文是关于vue-cli打包的一些常见的坑,会尽量详细的写每个步骤,大家可以一边看着文章,一边打包试试。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。初始化一个项目:这里初始化一个项目,因为导致打包错误的原因多种多样,避免因为其他设置错误干扰,从头开始打包整体步骤也会更加清晰。命令行:vue init webpack build1(项目名)//吧啦吧啦进行一波设置//进入项目文件夹npm install如果还不清楚如何初始化运行一个项目,可以参考我之前写的一篇文章:传送门。

image.png

写在前面:

npm run build 是vue-cli用来打包项目的命令行,本文是关于vue-cli打包的一些常见的坑,会尽量详细的写每个步骤,大家可以一边看着文章,一边打包试试。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。


初始化一个项目:

这里初始化一个项目,因为导致打包错误的原因多种多样,避免因为其他设置错误干扰,从头开始打包整体步骤也会更加清晰

命令行:

vue init webpack build1(项目名)
//吧啦吧啦进行一波设置
//进入项目文件夹
npm install

如果还不清楚如何初始化运行一个项目,可以参考我之前写的一篇文章:传送门。  

开始打包踩坑

命令行:

//直接打包
npm run build

打包出来的文件

image.png

第一个坑:文件引用路径

现在项目我们什么都没动,是初始化之后直接打包的状态,打开dist/index.htmnl文件整个网页都是一片空白的。

image.png

打开调试,发现有一排报错说是:不能加载到资源,后面就发现路径的问题,仔细看上面再看上面加载的css的引用路径,这里是有问题的。

爬坑:

文件位置:config文件夹/index.js文件

1.更改assetsPublicPath属性:

文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性:

assetsPublicPath:'/'//false
assetsPublicPath:'./'//true

assetsPublicPath属性作用是指定编译发布的根目录,'/'指的是项目的根目录 ,'./'指的是当前目录。

2.改好设置之后,重新打包。

打开打包文件:

image.png

重新打开index.html

错误原因:image.png打包出来所有的文件都会放在dist的static文件夹下面,index.html要加载文件,那么问题来了,'/'指的是项目的根目录 ,'./'指的是当前目录。要选哪个?当然选择原谅她了。

第二个坑:路由history模式。

这个坑是当你使用了路由之后,在没有后端配合的情况下就手贱打开路由history模式的时候,打包出来的文件也会是一片空白的情况,很多人踩这个坑的时候花了很多时间,网上的教程基本上都是说的第一个坑,这个坑很少有人提起。

image.png

图片出自vue-router文档

打包之前的样子:

这里我弄了个示例,因为是刚创建的项目没有其他因素干扰,当你打开路由的history模式之后,开发的时候一切正常

image.png

打包之前的路由

打包之后的样子:

image.png



打包之后路径也是对的,但是页面一片空白

解决方式:

// mode: 'history',//将这个模式关闭就好

这里并不是说不能打开这个模式,这个模式需要后端设置的配合,详情可以看:路由文档


Gzip 文件压缩

顺带分享一个很6的优化打包的方法,用起来也简单的很,只要下载一个插件,然后打开一个设置就好了。

设置方法:

image.png

这里其实是webpack自带的一个优化打包的方法,打开这个配置后如果没有下载那个插件,会提示你下载,下载就好了。

然后在打包的时候,每个js和css文件会压缩一个gz后缀的文件夹,浏览器如果支持g-zip 会自动查找有没有gz文件 找到了就加载gz然后本地解压 执行。

打开这个配置会之后对整体的打包体积也就是dist文件夹并没有太大的变化。下图来看看他的压缩率以及对加载的提升,可以说是非常大且明显的,大家可以自己试一下就知道多好用了。

image.png

后话

之前自己打包的时候连着踩了不少坑,可能是互相关联的,有时候你并不是错了一个地方,要想想自己其他地方是不是也是错的。上述的内容,算是自己踩坑的一些经验,希望可以帮到大家。


目录
相关文章
|
6月前
|
JavaScript
npm install没问题,但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
npm install没问题,但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
55 0
|
6月前
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
项目打包报错“caniuse-lite is outdated. Please run next command `npm update`”的解决方案
238 1
|
2月前
执行npm run dev的时候发生了什么
执行npm run dev的时候发生了什么
296 60
|
21天前
|
JSON 前端开发 JavaScript
webpack如何支持多种类型的文件和转换需求
【10月更文挑战第13天】webpack如何支持多种类型的文件和转换需求
|
6月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
225 0
|
4月前
|
JavaScript 开发工具
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
|
6月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
88 0
|
4月前
|
JavaScript
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
|
4月前
|
JavaScript
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
【解决方案】vue 项目 npm run dev 时报错:‘cross-env‘ 不是内部或外部命令,也不是可运行的程序
387 0
|
6月前
|
弹性计算 Dubbo Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中配置完fc,出现‘Function instance exited unexpectedly(code 1, message:operation not permitted) with start command 'npm run start '. 报错如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
197 5

推荐镜像

更多