VUE项目之开发、测试、生产环境部署

一、根目录下新建文件：.env.development（开发环境）、.env.test（测试环境）、.env.production文件（生产环境）

.env.development（开发环境）代码

NODE_ENV = 'development' 
VUE_APP_MODE = 'development'  
VUE_APP_BASE_API = 'http://xxx:8090/'
VUE_APP_IMG_API='http://xxx:801/'

NODE_ENV ：模式
VUE_APP_MODE：通过"VUE_APP_MODE"变量来区分环境
VUE_APP_BASE_API：api地址
VUE_APP_IMG_API：图处请求地址

.env.test（测试环境）代码

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_BASE_API = 'http://xxx:8090/'
VUE_APP_IMG_API='http://xxx:801/'
outputDir = test

.env.production文件（生产环境）代码

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_API = 'http://xxx:8090/'
VUE_APP_IMG_API='http://xxx:801/'

二、修改vue.config.js (打包输出）

publicPath: process.env.NODE_ENV === 'production' ? './' : './',
    outputDir:process.env.outputDir,
    devServer: {
        disableHostCheck: true,
        port:8081,
    },

三、修改package.json文件 （配置运行命令）

  "scripts": {
    "serve": "vue-cli-service serve ",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service serve --mode test",
    "pro": "vue-cli-service serve --mode production",
    "dev": "vue-cli-service serve --mode development"
  },

当前配置的是运行命令，如果是打包，则如下：

    "test": "vue-cli-service build --mode test", //打包测试环境
    "publish": "vue-cli-service build && vue-cli-service build --mode test", //测试和生产一起打包

四、如果使用了axios,axios则如下配置(注意：VUE_APP_BASE_API请求变量要跟.env.development（开发环境）、.env.test（测试环境）、.env.production文件（生产环境）中请求变量一致

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    timeout: 5000000 // request timeout
})

五：在VUE中使用图片请求

 data() {
        return {
            imgUrl: process.env.VUE_APP_IMG_API ,//"http://xxx:801/", 
            percentage: 20,

六：判断并使用不用的开发环境配置

if(process.env.VUE_APP_MODE==='development'){
    //开发环境下的执行操作
}else if(process.env.VUE_APP_MODE==='test'){
    //测试环境下的执行操作
}else{
    //生产环境下的执行操作
}

以上资料主要参考：https://blog.csdn.net/zrcj0706/article/details/104770310