config文件夹:
1.修改prod.env.js
module.exports = {
NODE_ENV: '"production"',
EVN_CONFIG: '"prod"',
BASE_URL: '"正式站接口地址"'
}
2.添加test.env.js
module.exports = {
NODE_ENV: '"test"',
EVN_CONFIG: '"test"',
BASE_URL: '"测试站的接口地址"',
}
3.修改dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
EVN_CONFIG: '"dev"',
BASE_URL: '"联调哪个后端就用哪个后端的地址"',
})
4.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文件夹:
5.build.js
//删除这个
// const spinner = ora('building for production...')
//添加这个
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
6.webpack.base.conf.js
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
// 添加此常量
const env=process.env.NODE_ENV
const CopyWebpackPlugin = require('copy-webpack-plugin');
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
// app: './src/main.js'
app: ["babel-polyfill", "./src/main.js"]
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
// 删除这段代码
// publicPath: process.env.NODE_ENV === 'production'
// ? config.build.assetsPublicPath
// : config.dev.assetsPublicPath
//改成这样
publicPath: env === 'production' ? config.build.assetsPublicPath : (env === 'test' || env === 'development' ? config.build.assetsPublicPath : config.dev.assetsPublicPath)
},
}
7.webpack.dev.conf.js
//定义一个常量env
const env = process.env.env_config
const ExtractTextPlugin = require('extract-text-webpack-plugin')
plugins: [
new webpack.DefinePlugin({
// 'process.env': require('../config/dev.env')
//更改依赖地址
'process.env': require('../config/' + env + '.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
]),
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// set the following option to `true` if you want to extract CSS from
// codesplit chunks into this main css file as well.
// This will result in *all* of your app's CSS being loaded upfront.
allChunks: false,
})
]
8.webpack.prod.conf.js
// const env = require('../config/prod.env')
// 修改env
const env = config.build[process.env.env_config + 'Env']
9.package.json 配置对应启动和打包命令
// 可删除原有的启动打包命令,也可保留,命令可自行配置,不必按下列代码
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"dev-dev": "cross-env NODE_ENV=development 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-prod": "cross-env NODE_ENV=production env_config=prod webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build-dev": "cross-env NODE_ENV=development env_config=dev node build/build.js",
"build-test": "cross-env NODE_ENV=test env_config=test node build/build.js",
"build-prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
打印 process.env.NODE_ENV 测试下没问题就ok了