1. 程式人生 > >vue-cli2實現分環境打包步驟(給不同的環境配置相對應的打包命令)

vue-cli2實現分環境打包步驟(給不同的環境配置相對應的打包命令)

打包命令:

1、在config檔案內新建test.env.js檔案:

module.exports = {
  NODE_ENV: '"testing"',
  EVN_CONFIG: '"test"',
}

2、新建prod.env.js:

module.exports = {
  NODE_ENV: '"production"',
  EVN_CONFIG: '"prod"',
}

3、修改config/index.js

4、對build中webpack.prod.conf.js做如下修改:

// const env = require('../config/prod.env') //原始程式碼  註釋掉

修改為:

const env = config.build[process.env.env_config+'Env']

5、確認安裝cross-env

npm install cross-env –save-dev 

6、對build資料夾下的build.js的修改:

7、修改package.json檔案(在script裡面新增):

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "set NODE_ENV=testing&& cross-env NODE_ENV=testing env_config=test node build/dev-server.js",
    "preview": "set NODE_ENV=preview&& cross-env NODE_ENV=preview env_config=pre node build/dev-server.js",
    "product": "set NODE_ENV=product&& node build/dev-server.js",
    "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build--pre": "cross-env NODE_ENV=preview env_config=pre node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

執行命令 npm run build--test

本地啟動命令區分環境:

1、config下的dev.env.js 及新建previewdev.env.js

2、

3、

4、package.json

命令:npm start  npm run preview