vue 打包的方式

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

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

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

    二、使用webpack

    那么就让我们步入正题

    第一种：

            vue create app生成项目的目录：

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

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

    第二种：

            使用webpack

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

            直接修改assetsPublicPath字段![](https://img-blog.csdnimg.cn/0dc2eeaf16ce4dce8215da143ab6c198.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUHJvbWlzZS5fc3Vubnk=,size_20,color_FFFFFF,t_70,g_se,x_16)

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

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

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

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

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

    --target lib 指定打包目录

    --name 打包后的文件名字

    --dest 打包后的文件夹名称 

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

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