vue-cli3.0項目環(huán)境
開發(fā)产雹、測試、預覽蔓挖、生產 四種環(huán)境介紹
一盗誊、新建配置文件
在項目的根目錄下新建 .env.development、.env.test哈踱、.env.preview、.env.production 文件分別對應四種環(huán)境
image.png
.env.xxx 文件代碼如下
NODE_ENV="xxx" //環(huán)境名
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 作為接口基礎地址
而且我們的不同的環(huán)境下糠馆，要有不同的打包名，所以又配置了個 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 //打包測試環(huán)境，默認會訪問 --mode 后面名字中的配置
npm run preview //打包預覽環(huán)境皂岔，默認會訪問 --mode 后面名字中的配置
npm run build //打包生成環(huán)境展姐，默認會訪問 --mode 后面名字中的配置
三剖毯、封裝axios
一般來說教馆，我們的項目肯定都做了請求攔截和響應攔截，那么就要封裝 axios活玲，在封裝的時候 baseUrl 屬性取配置中的值谍婉，就做到了接口環(huán)境的區(qū)分了
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 的其他配置我們都會在項目根目錄創(chuàng)建一個 vue.config.js 文件，那么在 outputDir 屬性取配置中的值探遵，就可以做到不同環(huán)境打包文件名字不同的區(qū)分了
轉載自：https://blog.csdn.net/liyunkun888/article/details/103322625
