在实际项目开发中,我们一般会直接使用vue、vue-cli来搭建项目。vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题。
在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修改webpack配置项。
但在Vue-CLI3.0中已经帮我们对webpack配置做了二次封装,在使用3.0版本搭建项目时,我们并不需要去关心原生webpack的配置,只需要查看Vue-CLI3.0官方API即可。
vue-cli3.0中的打包配置
vue-cli3.0的安装
npm install -g @vue/cli
使用vue-cli3.0搭建项目
vue create my-project
项目目录如下
在创建好的项目中,并不存在webpack的配置文件。因为vue框架里,不需要知道如何配置webpack, 只需要在项目根目录下创建一个vue.config.js配置文件,通过vue-cli脚手架中的一些封装好的简单配置来实现即可。
Vue脚手架工具的宗旨是让用户配置起来更简单,所以在Vue-CLI3.0没有把webpack的一些配置项直接暴露给我们,而是在webpack的基础上再次封装了更简单的API,供我们使用。这样即便我们不会用webpack, 也可以通过一些简单的配置,对脚手架的一些打包配置以及打包流程做一些变更。

本文介绍了Vue-CLI3.0的打包配置,包括安装、项目搭建及配置文件vue.config.js的使用。在Vue-CLI3.0中,无需直接修改webpack配置,而是通过vue.config.js进行简单配置,如更改输出目录outputDir。对于特殊需求,可通过configureWebpack接口自定义webpack配置。通过示例展示了如何配置使得静态文件可以从static目录被webpack-dev-server服务找到并访问。
最低0.47元/天 解锁文章
3382

被折叠的 条评论
为什么被折叠?



