vue项目针对不同的环境配置不同的命令行(打包和运行)

1.需要安装下载cross-env;

npm i --save-dev cross-env

2.在vue项目目录下的config文件夹下创建文件

    当前项目分为四种环境:开发环境(dev)、测试环境(test)、预生产环境(pre)、生产环境(prod);

    由于config文件下已经存在了开发环境和生产环境的文件，后期只需要修改内容即可，所以需要再创建test和pre的文件，

3.编写各个环境的域名

//dev.env.js
'use strict'
module.exports = {
    NODE_ENV: '"dev"',
    ENV_CONFIG: '"dev"', 
    BASE_URL: '"http://***.***.*.**"', //开发环境
}

//test.env.js
'use strict'
module.exports = {
    NODE_ENV: '"test"',
    ENV_CONFIG: '"test"', 
    BASE_URL: '"http://***.***.*.**"', //测试环境
}

//pre.env.js
'use strict'
module.exports = {
    NODE_ENV: '"pre"',
    ENV_CONFIG: '"pre"', 
    BASE_URL: '"http://***.***.*.**"', //预生产环境
}

//prod.env.js
'use strict'
module.exports = {
    NODE_ENV: '"prod"',
    ENV_CONFIG: '"prod"', 
    BASE_URL: '"http://***.***.*.**"', //生产环境
}

4.修改config目录下的index.html文件

    在build里面新增四种参数，在webpackage.prod.conf.js中使用

build: {
      //根据不同命令进行打包修改testEnv,devEnv,preEnv,prodEnv
    testEnv: require('./test.env'),//开发环境
    devEnv: require('./dev.env'), //测试环境
    preEnv: require('./pre.env'), //预生产环境
    prodEnv: require('./prod.env'), //生产环境
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
}

5.修改build目录下的webpack.dev.config.js

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

//定义一个常量env
const env = process.env.env_config


//更改process.env的依赖地址
const devWebpackConfig = merge(baseWebpackConfig, {
    module:{...},
    devtool:...,
    devServer:{...},
    plugins:[
        new webpack.DefinePlugin({
            'process.env': require('../config/' + env + '.env')//更改依赖地址
        }),
        ...
    ]
})

6.修改build目录下的webpack.prod.conf.js

    更改env的生成方式

// const env = require('../config/prod.env')//这是未配置之前的，需要猪是
const env = config.build[process.env.env_config + 'Env'] //根据不同命令生成对应的env的值

7.修改项目package.json文件

"scripts": {
    "dev-dev": "cross-env NODE_ENV=dev env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev-test": "cross-env NODE_ENV=test env_config=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev-pre": "cross-env NODE_ENV=pre env_config=pre webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev-prod": "cross-env NODE_ENV=prod env_config=prod 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=dev env_config=dev node build/build.js",
    "build-test": "cross-env NODE_ENV=test env_config=test node build/build.js",
    "build-pre": "cross-env NODE_ENV=pre env_config=pre node build/build.js",
    "build-prod": "cross-env NODE_ENV=prod env_config=prod node build/build.js"
  },



//dev-开头的是项目运行的不同环境的命令，build-开头的是打包成不同环境的命令
  例如：运行开发环境：npm run dev-dev

8.修改build目录下的build.js

    下面代码是直接复制的,

     注释一行代码:process.env.NODE_ENV = 'production'

     spinner重新定义 const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config + 'mode...')

'use strict'
require('./check-versions')()

// process.env.NODE_ENV = 'production'//这一段是需要注释的代码

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

// const spinner = ora('building for production...')//因为需要重新定义spinner，所以这里也需要注释
const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.env_config + 'mode...')//重新定义spinner
spinner.start()

9.完成

 

10.补充

我竟然忘记了一步操作，sorry~

修改webpack.base.conf.js