vue3.0 配置開發環境和生產環境

前言：

    開發過程、測試過程、生產過程使用的接口地址不能，還有執行的操作可能也不一樣，也就需要實現配置好開發環境、測試環境、生產環境，需要什么環境下的配置直接使用即可。

 

1、在src同級目錄也就是根目錄下新建文件：.env.development（開發環境）、.env.test（測試環境）、.env.production文件（生產環境）

 

 

2、三個配置文件的配置內容如下：

 .env.development（開發環境）配置內容

NODE_ENV = 'development'  //模式
VUE_APP_MODE = 'development'  //通過"VUE_APP_MODE"變量來區分環境
VUE_APP_API_URL = 'http://192.****:8008/api/' //api地址

 .env.production文件（生產環境）配置內容

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test

.env.production文件（生產環境）配置內容

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'

3、修改vue.config.js

 

 

module.exports = {
 
    // 基本路徑,相對路徑
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",

    process.env.outputDir：'dist', // 輸出文件目錄 outputDir: ,

4、修改package.json文件

 

 

    "test": "vue-cli-service build --mode test", //打包測試環境
    "publish": "vue-cli-service build && vue-cli-service build --mode test", //測試和生產一起打包

 

5、判斷並使用不用的開發環境配置

if(process.env.VUE_APP_MODE==='development'){
    //開發環境下的執行操作
}else if(process.env.VUE_APP_MODE==='test'){
    //測試環境下的執行操作
}else{
    //生產環境下的執行操作
}

6 如果是js，那么新建API文件夾，在文件夾下新建 request.js 中進行使用

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// 或
const service = axios.create({
    // axios中請求配置有baseURL選項，表示請求URL公共部分
    baseURL: process.env.VUE_APP_BASE_URL,
    // 超時
    timeout: 100000
})