vue跨域及分环境打包配置

最新推荐文章于 2024-09-13 11:27:03 发布

原创最新推荐文章于 2024-09-13 11:27:03 发布 · 813 阅读

CC 4.0 BY-SA版权

博客介绍了Vue项目相关配置。一是proxyTable配置接口地址代理，路径为config/index.js；二是分环境打包，开发和打包时都可通过process.argv获取启动命令参数，通过process.env.baseUrl获取文件的baseUrl并挂载在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访问不同的接口地址