vue 打包的方式

我是一个苦b的程序员,今晚加班到快通宵了,困得快睁不开眼了,女上司很关心,问我要不要吃宵夜。我没好气地说,宵夜就算了,能让我睡一觉就行了。女上司红着脸说了句讨厌啊,然后坐在我身边不动,好像距离我很近,搞得我很紧张,难道她发现我的程序出了bug?

        今天分享的是vue项目中的打包方式:

        一、使用vue-cli脚手架生成的项目

        二、使用webpack

        那么就让我们步入正题

        第一种:

                vue create app生成项目的目录:

《vue 打包的方式》

        我们可以看到使用脚手架生成的项目是没有config文件夹的,那么就需要我们在根目录下创建一个vue.config.js的文件 而且文件的名称一定要是vue.config.js

《vue 打包的方式》

         创建好文件之后在文件里添加一下代码:

《vue 打包的方式》

        第二种:

                使用webpack

                创建好项目之后我们可以看到会有一个config的文件夹

                直接修改assetsPublicPath字段《vue 打包的方式》

         配置完后之后就开始我们的打包环节

        打开项目根目录的package.json的文件夹 script脚本的build字段

《vue 打包的方式》

        现在执行npm run build 会把src下的所有代码一块打包

        那我想指定目录打包怎么办?

                这边简单介绍几个打包的配置项

        –target lib 指定打包目录

        –name 打包后的文件名字

        –dest 打包后的文件夹名称 

《vue 打包的方式》         接下来执行npm run build 生成我们打包后的文件,然后部署上线 但是需要注意的一点是只要我们的项目做了修改,都需要重新执行npm run build重新打包 

        深夜我坐在电脑前一边喝水一边苦苦检查bug。一番研墨拟纸,并点上上好檀香。定神片刻,泼墨挥毫,郑重地写下一行字:hello world!

    原文作者:usmile.
    原文地址: https://blog.csdn.net/weixin_60208344/article/details/122266644
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞