如何解決通過vue-cli來學習修改Webpack多環(huán)境配置和發(fā)布問題

這篇文章將為大家詳細講解有關如何解決通過vue-cli來學習修改Webpack多環(huán)境配置和發(fā)布問題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比銅川網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式銅川網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋銅川地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

Vue之所以現(xiàn)在如此之火熱，一部分也得益于有官方的腳手架生成工具Vue-cli,大大簡化了初學者環(huán)境搭建的成本，但是實際業(yè)務中我們往往需要實現(xiàn)其他的功能來對webpack進行改造，本文將會根據(jù)一些實際的業(yè)務需求，先學習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 配置文件分析

常見需求一：多環(huán)境配置和發(fā)布

Vue-cli生成的模版，只配置了npm run dev , npm run build 這行腳本，分別去啟動開發(fā)環(huán)境服務和，執(zhí)行打包。而往往正常的公司開發(fā)流程最少都會有開發(fā)、測試仿真、生產(chǎn)環(huán)境，而每個環(huán)境響應的服務器請求地址，或者一些配置參數(shù)都會不同，并且發(fā)布的時候需要發(fā)布到多臺服務器上，所以需要執(zhí)行自動化腳本來進行。構建和發(fā)布。

我們首先得弄清楚這個問題，轉載一段文章，作者：鄭海波，鏈接，來源：知乎

這個其實和vue 無關，是一個通用問題：即代碼在哪里構建。如果題主的服務器指的是運行服務器，那其實兩種都不是好選擇。很多新人包括我工作前都以為部署代碼是這樣的