vue-cli 中build中build.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 ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// var spinner = ora('building for production...')
// spinner.start()
。。。。
build中webpack.prod.conf.js做如下修改
// const env = require('../config/prod.env');
const env = config.build[process.env.env_config+'Env']
config中的index.js 部分代码修改如下
module.exports = {
build: {
prodEnv: require('./prod.env'),
testEnv: require('./test.env'),
ppeEnv: require('./ppe.env'),
index: path.resolve(__dirname, '../dist/' + new Date().getTime() + '/index.html'),
。。。。。
config中的index.js 配置代理跨域
// 配置代理跨域
proxyTable: {
'/api': {
target: 'http://xxxxxxxxxxxx/', // 开发接口域名
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/api': ''
}
}
},
在config中新建test.env.js
//测试环境
module.exports = {
NODE_ENV: '"testEnvironment"',
ENV_CONFIG: '"test"',
。。。
}
在config中新建ppe.env.js
//预生产
module.exports = {
NODE_ENV: '"ppeEnvironment"',
ENV_CONFIG: '"ppe"',
hosturl: '"https://ppexxx"'
。。。
}
安装cross-env npm i cross-env -S
接口调用 src文件夹中新建api文件；文件夹中新建api.js和baseURL.js
//--------------baseURL.js----------------
let baseURL = '/api';
// 判断开发环境 设置不同的请求域名
if(process.env.NODE_ENV === 'development') {
baseURL = '/api'; // 开发环境使用代理域名
} else if (process.env.NODE_ENV === 'testEnvironment') {
baseURL = 'http://xxxxxxxxxxxx'; // 测试环境
} else if (process.env.NODE_ENV === 'ppeEnvironment') {
baseURL = 'http://ppe'; // 演练环境
} else {
baseURL = ''; // 生产环境
}
export default baseURL
//--------------api.js----------------
import axios from 'axios';
import baseURL from './baseURL.js'
// 创建axios实例
const Request = axios.create({
baseURL: baseURL,
})
// 初始化默认post header
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 接口调用
export const queryAllRecord = params => {
return Request.post(`app/xxx/xxxxxx`,params).then(res => res.data);
};
package.json 修改
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build:test": "cross-env NODE_ENV=testEnvironment env_config=test node build/build.js",
"build:ppe": "cross-env NODE_ENV=ppeEnvironment env_config=ppe node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},
输入指令
-
npm run dev 开发环境
-
npm run build:test 打包测试环境
-
npm run build:ppe 打包演练环境
-
npm run build 打包生产环境
