使用不同的命令去打包正式，测试，本地vue项目

一、打开文件夹config下面的prod.env.js

将该文件里面的代码替换成下面代码，href，imgUrl，ApiUrl都是一些本地，测试，正式不一样的地址

//获取npm脚本命令（如npm run build 获取的就是build）
const target = process.env.npm_lifecycle_event;
var href = "";
var imgUrl = "";
var ApiUrl = "";
if (target == 'local') {
    // 本地
    href = '"http://www.xxx.com"'; 
    imgUrl = '"http://www.xxx.com"'; 
    ApiUrl = '"http://www.xxx.com"'; 
} else if (target == 'pretest') {
    // 测试
    href = '"http://www.xxx.com"'; 
    imgUrl = '"http://www.xxx.com"'; 
    ApiUrl = '"http://www.xxx.com"';
} else {
    // 正式
    href = '"http://www.xxx.com"'; 
    imgUrl = '"http://www.xxx.com"';
    ApiUrl = '"http://www.xxx.com"'; 
}
//导出
module.exports = {
    NODE_ENV: '"production"',
    href: href,
    imgUrl: imgUrl,
    ApiUrl: ApiUrl,
}

二、同样的打开config文件夹下面的dev.env.js

将该文件里的代码替换成下面代码

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    href: '"http://www.xxx.com"', 
    imgUrl: '"http://www.xxx.com/"',
    ApiUrl: '"http://www.xxx.com/"',
})

三、打开main.js

加入下面这段代码

Vue.prototype.href = process.env.href
Vue.prototype.imgUrl = process.env.imgUrl
Vue.prototype.ApiUrl = process.env.ApiUrl

四、打开文件夹config下面的index.js

加入local（本地）和pretest（测试），build（正式）是原本就有的

将assetsPublicPath的值分别改为本地，测试，和正式的地址，

注意：local下面的assetsPublicPath的值改为./

local: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        // assetsPublicPath: 'http://static.cszhenghui.com/',
        assetsPublicPath: './',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // 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'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    pretest: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        // assetsPublicPath: 'http://static.cszhenghui.com/',
        assetsPublicPath: 'http://static.xxx.com/',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // 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'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: 'http://static.xxx.com/',
        // assetsPublicPath: 'http://static.singercat.com/',
        // assetsPublicPath: API_ROOT_DICT,
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // 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'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },

五、打开build文件夹下面的webpack.base.conf.js

添加下面这段代码

const target = process.env.npm_lifecycle_event;
var publicPath = "";
if (process.env.NODE_ENV === 'production') {
    if (target == 'local') {
        publicPath = config.local.assetsPublicPath
    } else if (target == 'pretest') {
        publicPath = config.pretest.assetsPublicPath
    } else {
        publicPath = config.build.assetsPublicPath
    }
} else {
    publicPath = config.dev.assetsPublicPath
}

同时将output下面的publicPath改成下面代码那样的

module.exports = {
    entry: {
        app: './src/main.js'
    },
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: publicPath
        // publicPath: process.env.NODE_ENV === 'production'
        //   ? config.build.assetsPublicPath
        //   : config.dev.assetsPublicPath
    },
}

六、在build文件夹下面新建local.js和pretest.js

local.js

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

process.env.NODE_ENV = 'production'

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

var spinner = ora('building for production...')
spinner.start()

rm(path.join(config.local.assetsRoot, config.local.assetsSubDirectory), err => {
    if (err) throw err
    webpack(webpackConfig, function (err, stats) {
        spinner.stop()
        if (err) throw err
        process.stdout.write(stats.toString({
            colors: true,
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        }) + '\n\n')

        console.log(chalk.cyan('  Build complete.\n'))
        console.log(chalk.yellow(
            '  Tip: built files are meant to be served over an HTTP server.\n' +
            '  Opening index.html over file:// won\'t work.\n'
        ))
    })
})

pretest.js

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

process.env.NODE_ENV = 'production'

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

var spinner = ora('building for production...')
spinner.start()

rm(path.join(config.pretest.assetsRoot, config.pretest.assetsSubDirectory), err => {
    if (err) throw err
    webpack(webpackConfig, function (err, stats) {
        spinner.stop()
        if (err) throw err
        process.stdout.write(stats.toString({
            colors: true,
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        }) + '\n\n')

        console.log(chalk.cyan('  Build complete.\n'))
        console.log(chalk.yellow(
            '  Tip: built files are meant to be served over an HTTP server.\n' +
            '  Opening index.html over file:// won\'t work.\n'
        ))
    })
})

两个文件跟build.js不同的就是下面这一句

path.join(config.pretest.assetsRoot, config.pretest.assetsSubDirectory)

七、最后打开根目录下面的package.json文件

在scripts里面加上local和pretest这两句

• npm run local 执行local.js (本地)

• npm run pretest 执行pretest.js (测试)

• npm run build 执行build.js (正式)

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "pretest": "node build/pretest.js",
    "local": "node build/local.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
},