vue中怎么区分不同的环境

如何区分不同环境

我们在vue开发中常常要根据不同的环境区分不同的变量,常见的环境有如下几种:

  • 生产环境:production,
  • 开发环境:development,
  • 测试环境:test。

方式一、手动修改不同的变量

const BASE_URL = 'http://dlfordmc.org/dev'
const BASE_NAME = 'coder'
// const BASE_URL = 'http://dlfordmc.org/prod'
// const BASE_NAME = 'kobe'
// const BASE_URL = 'http://dlfordmc.org/test'
// const BASE_NAME = 'james'
export { BASE_URL, BASE_NAME }

我们当处于什么环境下,就将什么变量的注释取消。这样做太过于繁琐,并且也不安全。如果我们忘记,当处于生产环境下的,我们使用的是开发环境下的变量,此时就会造成不安全。

方式二、使用process.env.NODE_ENV来区分

let BASE_URL = ''
let BASE_NAME = ''
if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://dlfordmc.org/prod'
  BASE_NAME = 'dmc'
} else if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://dlfordmc.org/deve'
  BASE_NAME = 'dl'
} else {
  BASE_URL = 'http://dlfordmc.org/test'
  BASE_NAME = 'dlfordmc'
}
export { BASE_NAME, BASE_URL }

方式三、编写不同的环境变量配置文件

需要在根目录下编写三个文件:

  • .env.development
VUE_APP_BASE_URL=https://fordmcdl.org/devepment
VUE_APP_BASE_NAME=devepmemt
  • .env.production
VUE_APP_BASE_URL=https://fordmcdl.org/production
VUE_APP_BASE_NAME=production
  • .env.test
VUE_APP_BASE_URL=https://fordmcdl.org/test
VUE_APP_BASE_NAME=test

此时在其他地方访问的时候

  console.log(process.env.VUE_APP_BASE_URL)   //https://fordmcdl.org/devepment
  console.log(process.env.VUE_APP_BASE_NAME)  //devepmemt

注意:此时必须要加上VUE_APP,访问的时候需要加上process.env

vue配置不同环境

官网学习:https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

假如项目有4个环境:开发、生产、测试、其他

需要配置以下文件

1.package.json

vue脚手架默认有2个环境,开发和生产,在本地环境开发,发布到生产环境,配置如下

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

如果变成4个环境,1个本地开发,3个可发布测试。

首先,我们需要想清楚,我们需要的是什么。

① 需要本地开发,打包到不同环境测试发布;

② 还是开发时就是不同环境,打包也是不同环境

如果是第一种

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    //用这种
    "build--dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",
    "build--test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
    //或用这种vue3.0
    "build":"vue-cli-service build --mode development",
    "prodbuild":"vue-cli-service build --mode production",
    "testbuild":"vue-cli-service build --mode test"
  },

如果是第二种

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode test",
    "production": "vue-cli-service serve --mode production" ,
    "build":"vue-cli-service build --mode development",
    "prodbuild":"vue-cli-service build --mode production",
    "testbuild":"vue-cli-service build --mode test"
  },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

你可能感兴趣的:(vue中怎么区分不同的环境)