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"
  },