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();
}
Logo

前往低代码交流专区

更多推荐