浏览文章

文章信息

Vue自定义配置模块环境文件,无需重新运行即可改变运行环境 13654

./config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  DEV_ENV: {
    api_domain:'https://bbs.aiweline.com/rest/V0'
    store_code: 'default',
    token: 'dsdsadse3wf233t4rtffdfdd2',
    api: '/api',
    website_id: 2
  }
})

./config/prod.env.js

'use strict'
module.exports = {
  PROD_ENV: {
    api_domain:'https://bbs.aiweline.com/rest/V1'
    store_code: 'default',
    token: 'dsd2fdt4gfdgdfd2ghfdhdcs',
    api: '/dev_api',
    website_id: 2
  }
}

./EnvConfig.js

const dev = true
const devEnv = require('./src/config/dev.env')
const env = dev ? devEnv.DEV_ENV : devEnv.PROD_ENV
/* 导出配置 */
module.exports = {
  Env: env
}

./vue.config.js中引入EnvConfig.js

// 引入环境配置文件
const EnvConfig = require('./EnvConfig')
// 在根目录下自行创建vue.config.js
module.exports = {
  lintOnSave: false,
  // cli3 代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
  devServer: {
    port: '8080',
    open: true,
    proxy: {
      '/api': {
        target: EnvConfig.Env.api_domain,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      },
      '/dev_api': {
        target: EnvConfig.Env.api_domain,
        changeOrigin: true,
        pathRewrite: {
          '^/dev_api': ''
        }
      }
    }
  }

如果在其余文件中使用到配置:(吐槽,VUE居然不支持自定义的配置直接导入vue.config.js希望可以支持)

例如我要在其他地方引用环境配置:

import { Env } from '../../EnvConfig'


完毕!小白VUE,不对请指教。

原创