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

vue-cli2实现分环境打包步骤(给不同的环境配置相对应的打包命令)_第1张图片

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的修改:

vue-cli2实现分环境打包步骤(给不同的环境配置相对应的打包命令)_第2张图片

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

vue-cli2实现分环境打包步骤(给不同的环境配置相对应的打包命令)_第3张图片

2、vue-cli2实现分环境打包步骤(给不同的环境配置相对应的打包命令)_第4张图片

 

3、

vue-cli2实现分环境打包步骤(给不同的环境配置相对应的打包命令)_第5张图片

4、package.json

vue-cli2实现分环境打包步骤(给不同的环境配置相对应的打包命令)_第6张图片

命令:npm start  npm run preview

 

你可能感兴趣的:(vue,vue-cli,部署,环境变量配置)