Vue中区分development和product和test

Vuecli 3.0 环境下

(1) 在根目录下面新建一个文件夹 config 里面写 3 个文件

• api_development.js

• api_production.js

• api_test.js

(2) 在刚才创建的 3 个文件里面写对应的代码

• api_development.js

let url = {
  homeurl: '这就是开发环境',
}
export default url

• api_production.js

let url = {
  homeurl: '这就是生产环境',
}
export default url

• api_test.js

let url = {
  homeurl: '这就是测试环境',
}
export default url

(3) 在根目录创建 3 个文件以.env 开头,特别提醒是根目录 具体的看图

(4) 在对应的 env 文件里面写不同的代码

• .env.development

NODE_ENV = 'development'

VUE_APP_MODE = 'development'

• .env.production

NODE_ENV = 'production'

VUE_APP_MODE = 'production'

• .env.test

NODE_ENV = 'test'

VUE_APP_MODE = 'test'

(5)在根目录新建 config.js 文件

let ROOT
if (process.env.VUE_APP_MODE == 'development') {
  console.log('开发环境')
  ROOT = require('@/config/api_development.js')
} else if (process.env.VUE_APP_MODE == 'production') {
  console.log('生产环境')
  ROOT = require('@/config/api_production.js')
} else if (process.env.VUE_APP_MODE == 'test') {
  console.log('测试环境')
  ROOT = require('@/config/api_test.js')
}

export default ROOT.default

(6) 组件里引入 config.js

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
  import url from '@/config.js'
  export default {
    mounted() {
      console.log(url)
      this.message = url.homeurl
    },
    data() {
      return {
        message: '',
      }
    },
  }
</script>

<style lang="less" scoped></style>

(7) 在 package.json 里面

• 找到 scripts 里面写命令,命令多少看个人情况

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

(8) 然后在依据不同的命令调用不同的方法

Vuecli2.0 环境

(1) 复制一份 build/build.js 文件命名为 build/build-test.js 修改这三处地方

(2)复制一份 build/webpack.prod.conf.js 文件命名为 build/webpack.test.conf.js 修改这三处地方

(3)复制一份 config/prod.env.js 文件命名为 config/test.env.js

• test.env.js

'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  BASE_URL: '"https://test.com"',
})

• dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_URL: '"https://localhost:8080"',
})

• prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: '"https://prod.com"',
}

(4) 在 package.json 文件里添加一条 npm run test 的启动项

(5) 使用 可以在封装 axios 的时候带上 process.env.BASE_URL

import Axios from 'axios'

const axios = Axios.create({
  baseURL: process.env.BASE_URL,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
})
export default axios