一、proxyTable配置接口地址代理
config/index.js
dev: {
// 静态资源文件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',
// 代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable: {
'/api': {
target: 'http://xxxxxx.com', // API接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/api': ''
}
}
},
二、分环境打包
开发时
1.config/dev.env.js
,通过process.argv获取启动命令参数
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
let params = process.argv[4]//取启动命令的第4个参数 如npm run dev --env=test
let baseUrl = ''
switch (params) {
case '--env=test':
baseUrl = '"http://test.com"'
break
case '--env=prod':
baseUrl = '"http://prod.com"'
break
default:
baseUrl = '"http://dev.com"'
}
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
baseUrl: baseUrl
})
2.src/main.js
,通过process.env.baseUrl 获取config/dev.env.js
文件的baseUrl,并挂载在Vue的原型上
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.$baseUrl = process.env.baseUrl
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.通过命令npm run dev、npm run dev --env=test、npm run dev --env=prod访问不同的接口地址
打包时
1.打包项目时config/prod.env.js
,通过process.argv获取启动命令参数
'use strict'
let params = process.argv[2]//取启动命令的第二个参数 如npm run buid
let baseUrl = ''
switch (params) {
case '--env=test':
baseUrl = '"http://test.com"'
break
case '--env=prod':
baseUrl = '"http://prod.com"'
break
default:
baseUrl = '"http://dev.com"'
}
module.exports = merge(prodEnv, {
NODE_ENV: '"production"',
baseUrl: baseUrl
})
2.在src/main.js
中,通过process.env.baseUrl 获取config/prod.env.js
文件的baseUrl,并挂载在Vue的原型上
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.$baseUrl = process.env.baseUrl
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.通过命令npm run build、npm run build --env=test、npm run build --env=prod访问不同的接口地址