通过vue-cli来学习修改Webpack多环境配置和发布问题

Vue之所以现在如此之火热,一部分也得益于有官方的脚手架生成工具Vue-cli,大大简化了初学者环境搭建的成本,但是实际业务中我们往往需要实现其他的功能来对webpack进行改造,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改。

Vue-cli生成模版文件目录

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

本文主要关注的点在

build - 编译任务的代码

config - webpack 的配置文件

package.json - 项目的基本信息

具体每一行webpack的配置的含义这里就不详细介绍了,请参考 vue2.0脚手架的webpack 配置文件分析

常见需求一:多环境配置和发布

Vue-cli生成的模版,只配置了npm run dev , npm run build 这行脚本,分别去启动开发环境服务和,执行打包。 而往往正常的公司开发流程最少都会有开发、测试仿真、生产环境,而每个环境响应的服务器请求地址,或者一些配置参数都会不同,并且发布的时候需要发布到多台服务器上,所以需要执行自动化脚本来进行。构建和发布。

我们首先得弄清楚这个问题,转载一段文章,作者:郑海波,链接,来源:知乎

这个其实和vue 无关,是一个通用问题:即代码在哪里构建。如果题主的服务器指的是运行服务器,那其实两种都不是好选择。很多新人包括我工作前都以为部署代码是这样的

但实际上在较大的互联网公司会麻烦一些。以下介绍都是常见做法,并简化了一些流程,仅仅只是为了方便新人理解。代码提交到git或svn服务器注意这里是源文件,不是build后的文件

2. 构建服务器会从git服务器中拉去要发布的代码版本在这里完成安装依赖,如题主的vue。并构建用于部署的文件,这些文件一般也会被压缩成一个压缩包用于管理

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/497.html