vue-cli 默認只提供了 dev 和 prod 兩種環境。但其實正真的開發流程可能還會多一個 sit 或者 stage 環境，

就是所謂的測試環境和預發布環境。所以我們就要簡單的修改一下代碼。其實很簡單就是設置不同的環境變量

詳細操作過程

1.在 package.json 中添加 test 命令

"scripts": {  "dev": "cross-env NODE_ENV=online node build/dev-server.js --host 192.168.1.8",  "local": "cross-env NODE_ENV=local node build/dev-server.js",  "build": "node build/build.js",  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",  "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js" },

2.創建環境文件 (BASE_API 為接口的主地址)

/config/dev.env.js (開發環境)module.exports = { NODE_ENV: '"development"', ENV_CONFIG: '"dev"', BASE_API: '"http://192.168.1.7"' // 這里是后端和后端做開發測試}/config/sit.env.js (測試環境,測試服)module.exports = { NODE_ENV: '"production"', ENV_CONFIG: '"sit"', BASE_API: '"http://test.todomore.cn"'}/config/prod.env.js (生產環境,正式服)module.exports = { NODE_ENV: '"production"', ENV_CONFIG: '"prod"', BASE_API: '"http://www.todomore.cn"'}

3.修改 config/index.js

var path = require("path")module.exports = { // 開發環境配置 dev: {  assetsSubDirectory: "static",  assetsPublicPath: "/",  port: 7127,  // context: [  //  //代理路徑  //  "/shopping",  // ],  // proxypath: "http://localhost:7127",  cssSourceMap: false }, // 生產環境配置 build: {  index: path.resolve(__dirname, "../../../public/store/index.html"),  assetsRoot: path.resolve(__dirname, "../../../public/store"),  assetsSubDirectory: "static",  assetsPublicPath: "/store/",  productionSourceMap: true,  // Surge or Netlify already gzip all static assets for you.  // Before setting to `true`, make sure to:  // npm install --save-dev compression-webpack-plugin  productionGzip: false,  productionGzipExtensions: ["js", "css"] }}

4.安裝插件(如果 package.json 里面本來就有 cross-env 的話就不用這一步了)

npm install --save cross-env

修改 webpack.prod.conf

原來的 env 是引入的 prod.env:

// const env = require('../config/prod.env')

修改為：

const env = require("../config/" + process.env.env_config + ".env")

6.修改提示語

跟 build:pre 不同的是 node_env 需要指向 config 中的文件名稱，與之對應的是 env_config 的名字。

這樣便可以打包成功了。

build.js 中有一段描述：

js const spinner = ora("building for prod....") 

可以動態修改為：

js const spinner = ora("building for " + process.env.env_config)