一般的实现方式
//常规的做法
let mode="dev"; //可以设置:dev、test、prod
let baseUrl="";
if(mode=="dev"){
baseUrl=="http://www.xx.com";
}else if(mode=="test"){
baseUrl=="http://www.xxtest.com";
}else {
baseUrl=="http://www.xxprod.com";
}
export {
baseUrl
}
这种做法基本需求是实现了,如果做持续集成,代码在本地跑成功没有bug以后,上传源码到服务器通过执行脚本直接编译打包,这个时候上面的这种常规做法显然就行不通了。
使用cross-env第三方库实现
cross-env官方的介绍是:跨平台环境脚本的设置,你可以通过一个简单的命令(设置环境变量)而不用担心设置或者使用环境变量的平台。
- 安装依赖
npm install --save-dev cross-env
- 添加test.env.js文件
- 修改prod.env.js文件
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG:'"prod"'
};
- 修改build目录下webpack.prod.conf.js文件
const env = config.build[process.env.env_config+'Env'];
- 修改config目录下index.js文件
build: {
//添加下面两行代码
prodEnv: require('./prod.env'),
testEnv: require('./test.env'),
// Template for index.html
index:
path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...................
}
- 修改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...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' );
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
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'
))
})
})
- 修改package.json文件
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
"build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
- 在src下面创建common/js 目录下的config.js文件
if (process.env.NODE_ENV == 'development') {
baseUrl = "开发环境接口地址http://www.xx.com";
} else if (process.env.NODE_ENV == 'production') {
baseUrl = "正式环境接口地址http://www.xxprod.com";
} else if (process.env.NODE_ENV == 'testing') {
baseUrl = "测试环境接口地址http://www.xxtest.com";
}
- 配置全局请求接口 (我在这用的是axios)在main.js中
import baseUrl from './common/js/config'
axios.defaults.baseURL = baseUrl.baseUrl; //测试接口地址
Vue.prototype.$axios = axios
用法
this.$axios
.post("接口地址例如(/test)", 需要传的参数, { 请求头例:(headers: { token: this.tokenValues }) })
.then(res => {
});
ps备注
有时候,正式环境的地址是:http://www.xx.com。在弄测试环境的时候为了简化,后端同学就直接用nginx做一个重定向,然后就有了测试环境地址:http://www.xx.com/test/index.html。 在这个时候webpack的配置文件中,就要根据具体情况作出修改,否则部署以后页面就会空白,因为编译后的资源文件找不到了
在webpack.base.conf.js文件中,要根据具体情况作出修改。
let assetPublicPath;
if (process.env.env_config == 'test') {
assetPublicPath='/test/'
}else if(process.env.env_config == 'prod'){
assetPublicPath=config.build.assetsPublicPath;
}else{
assetPublicPath=config.dev.assetsPublicPath;
}