webpack打包vue项目，可修改配置文件

Posted 2023-02-21

参考技术A vue项目打包完成后，如需改变配置文件中的信息，比如域名修改（如下图config.js），是不可能在配置文件中直接更改的，因为配置文件是前端写死的，这时只能手动更改项目中的配置，然后重新打包npm run build 

var packConfig = require('../src/config')//引入原配置文件

var GenerateAssetPlugin = require('generate-asset-webpack-plugin')//引入插件

var createServerConfig = function(compilation)//声明转换函数，将对象转为json字符串

  return JSON.stringify(packConfig)



plugins里添加

new GenerateAssetPlugin(//生成文件，并添加入内容

        filename: 'config.json',

        fn: (compilation, cb) =>

            cb(null, createServerConfig(compilation));

        ,

        extraFiles: []

    )

import axios from 'axios'//引入一个ajax封装工具

import storage from 'services/storage'//引入对缓存操作的封装工具

var getConfigJson = function ()

  //声明一个函数，用来读取json文件并将其内容存入缓存

    axios.get('config.json').then((result) =>

  //读取文件

storage.setItem('config', result.data)

    ).catch((error) =>

console.log(error)

  )