vue如何外置配置文件，灵活修改接口地址

vue如何外置配置文件，灵活修改接口地址

最近使用vue2，webpack3打包项目，每次打包，接口地址都会被打包进去，无法自由修改。这是一个对前端增加工作量，对测试很不友好的操作。然后自己查了下资料，都说使用generate-asset-webpack-plugin插件，自己试着成功外置配置文件，这里做下记录。

首先安装插件

npm install generate-asset-webpack-plugin -S -D

在build文件夹下，新建一个文件generate-asset.config.js。内容如下：

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const config = require('../config/app.config');

function createServerConfig(compilation) {
    return JSON.stringify(
        Object.assign({
            _hash: compilation.hash,
        },config)
    )
}
//生成app-config.json文件
module.exports = () => {
    return new GenerateAssetPlugin({
        filename: 'config/app-config.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        }
    })
}

这里用到app.config。在config文件夹下，创建app.conifg.js

module.exports = {
  env: 'prod',
  baseUrl: "http://25.30.13.76:9095"
}

这里就是常用的配置文件，在开发环境下，可以直接引入使用。在发布环境下，还需要在webpack.base.conf.js文件夹下配置下。先引入：

const packageConfig = require('../package.json')
const generateAssetAppConfig = require('./generate-asset.config')

再加入plugins的配置

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  plugins: [
    generateAssetAppConfig(packageConfig)
  ],

到这里基本上生成app-config.json文件已经没问题了，接下来就是如何使用它。我对axios抽离封装了一个https.js的配置文件，修改如下：

import * as g from '../config/app.config'
import $ from 'jquery'

if (process.env.NODE_ENV === 'production') {//打包发布环境使用app-config.json
    $.ajax({
        url: 'config/app-config.json',
        async: false,
        type: 'get',
        dataType: "json",
        success: function (rs) {
            if (rs.baseUrl) {
                axios.defaults.baseURL = rs.baseUrl;
            }
        }
    });
} else {//开发环境就直接使用app.config.js
    axios.defaults.baseURL = g.baseUrl;   //配置接口地址
}

使用npm run dev，就直接用的config/app.config.js文件
使用npm run build 就用打包新生成的dist/config/app-config.json文件。

OK，测试直接修改app-config.json，就可以自由改变接口地址了。

------2020-11-13------
最近因为将vue-cli升级到了4，webpack也升到了4，所有配置有所改变，相关配置如下：

---

新建vue.config.js，这里随带提一句，@vue/cli里生成的babel.config.js和这个文件不是同一个文件，不要写到babel.config.js里了。

const configs = require('./config/app.config')
var createServerConfig = function(compilation) {
  return JSON.stringify(
    Object.assign(
      {
        _hash: compilation.hash,
      },
      configs
    )
  )
}

module.exports = {
	chainWebpack: (config) => {
    config.plugin('GenerateAssetPlugin').use('generate-asset-webpack-plugin', [
      {
        filename: 'app-config.json',//生成的文件
        fn: (compilation, cb) => {
          cb(null, createServerConfig(compilation))
        },
        extraFiles: [],
      },
    ])
  },
}

这里生成的文件app-config.json，直接就放在根目录下了，上面app.config.js文件，一样放在config的文件夹下就OK。使用方法同https.js一样。

---

另外，还有一种方法，就是把app.config.js放到static目录下，然后，稍微修改下，

window.g = {
	baseUrl: "http://25.30.13.76:9095"
}

然后再index.html中引入

<script src="./static/app.config.js"></script>

在https.js中直接赋值。axios.defaults.baseURL = g.baseUrl;
具体想使用哪种方式，看各人而定，当然我更偏向生成json的方式。

------2023-05-16------

看到有人问Vue3怎么打包配置文件，我这里还是简单整理一下吧

---

Vue3目前一般都和vite+ts一起搭配框架了。配置文件为config.js，放在public目录下。然后在vite.config.ts里增加代理配置就可以了

config.js 的位置

config.js的内容

	const Base = {
	    URL: "http://192.168.101.100:3000"
	}
	export default Base;

vite.config.ts配置增加的内容

	import Base from './public/js/config'
	
	server: {
        cors: true,
        open: true,
        proxy: {
            '/api': {
                target: Base.URL,   //代理接口
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }

最后build后，dist目录下的js下就有config.js可以进行灵活配置了。

当然还有更简单直接的，弄一个config.json在public目录。然后直接fetch请求这个json文件就好了。

// config.json的内容：
{
  "baseUrl": "http://192.168.101.10:3000/"
}
// http请求内容：
let g = { baseUrl: "" };
const r = await fetch("/config.json");
if (r.ok) {
  g = await r.json();
}