【vue】使用vue-cli3.0/4.0搭建的項目如何區分環境

前言

上一篇博客，我說了，最近公司是空閒期。基本都是處於渾水摸魚階段了，每天打卡上班，打卡下班

但是我是屬於那種有點閒不住的人，總想搞點東西玩玩

所以我把公司的項目往 vue-cli4.0 進行了遷移（我原本真的只想遷移到 3.0）

可以參考 vue-cli4.0快速搭建一個項目

遷移的過程可以說還算順利，也沒遇到什麼麻煩，就是一些插件版本的升級問題

最近，有人私信問到了我關於 vue-cli4.0 搭建的項目怎麼配置環境，所以我就再開一篇博客介紹下

如果是 vue-cli2.0 的項目，環境配置請看我的這篇博客 vue-cli2.0配置環境

一、新建配置文件

跟之前的博客一樣，我只拿 開發、測試、預覽、生產 四種環境介紹

在項目的根目錄下新建 .env.development、.env.test、.env.preview、.env.production 文件分別對應四種環境

.env.xxx 文件代碼如下

NODE_ENV="xxx"                                    //環境名
VUE_APP_BASE_URL="http://xxx.xxx.xxx"             //服務器地址
VUE_APP_BASE_API="http://xxx.xxx.xxx:port"        //接口地址
VUE_APP_DIR_NAME="xxx"                            //打包名

個人覺得，NODE_ENV、VUE_APP_BASE_URL 給配置下，其他的變量根據自己的需要進行添加和配置

因爲我們的項目部署服務器和接口的服務器是分開的，所以我就多配置了個 VUE_APP_BASE_API 作爲接口基礎地址

而且我們的不同的環境下，要有不同的打包名，所以又配置了個 VUE_APP_DIR_NAME 作爲打包後的文件夾名稱

二、配置package.json文件

"scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service build --mode test",
    "preview": "vue-cli-service build --mode preview",
    "build": "vue-cli-service build --mode production"
},

注意：--mode 後面跟的名字一定要跟 .env.xxx 的名字對應起來才能實現不同的命令用不同的配置文件

所有命令如下

npm run serve        //啓動本地服務，默認會訪問 .env.development 中的配置
npm run test         //打包測試環境，默認會訪問 --mode 後面名字中的配置
npm run preview      //打包預覽環境，默認會訪問 --mode 後面名字中的配置
npm run build        //打包生成環境，默認會訪問 --mode 後面名字中的配置

三、封裝axios

一般來說，我們的項目肯定都做了請求攔截和響應攔截，那麼就要封裝 axios，在封裝的時候 baseUrl 屬性取配置中的值，就做到了接口環境的區分了

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, //取.env.xxx中的配置
  timeout: 0
});

四、配置vue.config.js文件

//輸出文件目錄
outputDir: process.env.VUE_APP_DIR_NAME,

同樣的，vue 的其他配置我們都會在項目根目錄創建一個 vue.config.js 文件，那麼在 outputDir 屬性取配置中的值，就可以做到不同環境打包文件名字不同的區分了

 

結束語

好了，這樣就完成了項目環境的配置了，當然網上也有其他的教程，適合自己的纔是最好的！

有問題歡迎評論~