一、打开文件夹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-pluginproductionGzip: 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 offbundleAnalyzerReport: 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-pluginproductionGzip: 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 offbundleAnalyzerReport: 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-pluginproductionGzip: 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 offbundleAnalyzerReport: 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 errwebpack(webpackConfig, function (err, stats) {spinner.stop()if (err) throw errprocess.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 errwebpack(webpackConfig, function (err, stats) {spinner.stop()if (err) throw errprocess.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"
},
复制代码