您当前的位置：主页 > 技术探讨 >

vue分环境打包 cross-env

时间：2020-03-23 10:01 日记人：arlen.zhou

一、需求背景

　　我目前接手了一个项目是手机端，在开发过程中由于要涉及环境打包指令，所以研究了一下关于vue 生态的开发方式，有dev环境，test环境，最后才是生产环境prod。这就是下文要讲的。涉及到的三个指令我已经编译好了，跟主流大家用的不会产生太多的差异所以大家放心使用。

首先人狠话不多：cnpm install cross-env --save

# 线上开发环境：npm run build--dev
 
# 线上测试环境：npm run build--test

# 线上生产环境：npm run build--prod　　　　　　

二、环境文件编辑

      在vue项目 src 文件目录中添加 common/config.js 文件，作为环境变量打包的配置文件，


　　 
 

（三）、修改prod.env.js文件  修改dev.env.js文件

'use strict';
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG:'"prod"'
};

'use strict';

module.exports = {

  NODE_ENV: '"development"',

  ENV_CONFIG:'"dev"'

};

 

（四）、修改build目录下webpack.prod.conf.js文件

 

// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env'];




（五）、修改config目录下index.js文件


build: {
    //添加下面两行代码
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    devEnv: require('./dev.env'),
    // Template for index.html
    index:
      path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/', 
}


（六）、修改build目录下build.js文件

// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' );

（七）、修改package.json文件


 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build--dev": "cross-env NODE_ENV=development env_config=dev node build/build.js", // npm run build--test  测试环境打包
"build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js", // npm run build--test 测试环境打包 "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js" // npm run build--prod //生产环境打包 },


然后使用的小伙伴就可以直接开始用了。追风的男人从不停止前进~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~