前言：我们在使用Vue开发时，会遇到不同环境下，请求地址的不同，那么在打包时就需要手动切换不同环境下的请求地址，这样不方便我们的开发，本文将学习使用Vue+webpack配置不同环境下的打包
1、安装依赖 cross-env，解决跨平台问题
npm install cross-env --save-dev
2、添加各环境不同参数
在 config 目录下添加 dev.env.js、prep.env.js、prod.env.js文件；
- dev.env.js：本地测试环境
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"本地测试环境请求地址"'
})
- prep.env.js：预发布环境
'use strict'
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prep"',
BASE_API: '"预发布环境请求地址"'
}
- prod.env.js：正式发布环境
'use strict'
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"',
BASE_API: '"正式发布环境请求地址"'
}
3、修改build/webpack.prod.conf.js文件
const env = require('../config/prod.env') //原代码块
//修改为，意在根据环境使用不同的配置文件
const env = require('../config/' + process.env.env_config + '.env')
4、修改config文件夹下的index.js文件
//原代码：
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
... // 省略部分代码
}
//修改后:
build: {
devEnv: require('./dev.env'), // 新增
prepEnv: require('./prep.env'), // 新增
prodEnv: require('./prod.env'), // 新增
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
... // 省略部分代码
}
5、修改build文件夹下的build.js文件
//原代码：
'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.start()
... // 省略部分代码
//修改后:
'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')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
... // 省略部分代码
6、新建文件判断环境切换时接口url的切换
在utils/config.js中对process.env.NODE_ENV环境的判断，判断使用哪个url
/*基础配置*/
export default {
install: function (Vue, options) {
let isDev=process.env.NODE_ENV=='development';
Vue.appConfig={
domain:isDev?'本地测试地址':process.env.BASE_API,
fileDomain:isDev?'本地测试地址':process.env.BASE_API,
}
},
}
7、修改根目录下的package.json的scripts
// 原代码
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.conf.js",
},
// 修改后
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.conf.js",
"build:prep": "cross-env NODE_ENV=production env_config=prep node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
8、打包项目
// 预生产环境打包项目
npm run build:prep
// 生产环境打包项目
npm run build:prod
9、打包时可能会遇到的问题
1）打包完毕后可能会有出现页面空白问题：页面空白时，先F12查看是否路径错误，若路径错误，则需将根目录config下index.js中的build的 assetsPublicPath：'/' 改为：assetsPublicPath：'./'
但是此时会有另外一个问题，使用npm run build--test的时候 ，因为没有配置testing时的路径，因此会默认是'/'，此时可以在根目录build文件夹下的webpack.base.conf.js的output中增加一个判断，将testing的路径指定到prod；
//原代码：
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
}
//修改后：
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: (process.env.NODE_ENV === 'testing' ? config.build.assetsPublicPath : config.dev.assetsPublicPath) //增加判断
}
2）为了防止万一，可以将配置开发环境和prod环境的相关判断中都加上testing环境的判断：根目录下build文件夹下的vue-loader.conf.js和utils.js文件 ，当然现在不改还没有发现问题如果想另外配置test环境，可以在根目录build文件夹下新建webpack.test.conf.js和test.js，可以根据prod的修改，此时修改各个地方关于环境的判断
3）此时，打包项目后，打开index.html文件，项目中的一些图标可能会是404，这时修改build文件夹下的utils.js文件。
原代码：
修改后：
