vue跨域及分环境打包配置

一、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访问不同的接口地址