vue项目-配置公共参数

最新推荐文章于 2025-07-17 14:30:47 发布

原创最新推荐文章于 2025-07-17 14:30:47 发布 · 5k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用generate-asset-webpack-plugin插件在Webpack中动态生成并加载JSON配置文件，包括插件安装、配置修改及在Vue项目中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装 generate-asset-webpack-plugin

npm install --save-dev generate-asset-webpack-plugin

2.修改 /build/webpack.dev.conf.js

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const configJson = function(compilation) {
	let cfgJson = {
		APIUrl: "https://www.baidu.com/api/",  //接口地址
		windowUrl: "https://www.baidu.com/"  //项目域名
	};
	return JSON.stringify(cfgJson);
}

//这段代码加在plugins:[]中
new GenerateAssetPlugin({
	filename: 'configJson.json',
	fn: (compilation, cb) => {
		cb(null, configJson(compilation));
	},
	extraFiles: []
})

3.修改 /build/webpack.dev.conf.js （和上一步一样）

4.修改 /src/main.js

Vue.prototype.configJson = function() {
	axios.get("/configJson.json", {
		headers: {
			'Content-Type':'application/json;charset=UTF-8'
		}
	}).then((data) => { //data是configJson.json中自定义配置
		sessionStorage.setItem('tcUrl', JSON.stringify(data.data));
	}).catch((error) => {
		console.log(error)
	});
}

5.修改 /src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    mounted:function(){
      this.configJson();
    }
  }
</script>