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

本文链接：https://blog.csdn.net/qq_31173561/article/details/90672070

1.先安装generate-asset-webpack-plugin

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

注意：--save-dev（安装在devDependencies）开发环境使用

--save （安装在 dependencies）生产环境使用

2.需要更改 build文件夹下的 webpack.dev.conf.js

const express = require('express')
const app = express()
var apiSetting = require('../src/assets/config/apiSetting.json') //你的配置文件路径
var apiRoutes = express.Router()
app.use('/serverconfig.json', apiRoutes)

devServer 下的

  devServer: {
   // 这是添加的配置项目
    before(app) {
      app.get('/serverconfig.json', (req, res) => {
        res.json(apiSetting)
      })
    }
  },

3.需要更改 build文件夹下的 webpack.prod.conf.js

//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin');
var createServerConfig = function (compilation) {
  var apiSettings = require('../src/assets/config/apiSetting.json')
  return JSON.stringify(apiSettings);
}

plugins下的

  plugins: [
    //moment.js打包体积过大
   // new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(zh-cn|en-gb)$/),
    //让打包的时候输入可配置的文件
    new GenerateAssetPlugin({
      filename: 'serverconfig.json',
      fn: (compilation, cb) => {
        cb(null, createServerConfig(compilation));
      },
      extraFiles: []
    }),
  ]

OptimizeCSSPlugin

然后就配置好了可以使用了

app.vue

import ApiSetting from "./modules/ApiSetting.js"; // apiSetting配置
import LocalStorage from "./modules/LocalStorage"; // localStorage
export default {
  name: "App",
  async beforeCreate() {
  // 判断是否登录，未登录的直接跳转到登录页面 
    var userInfo = LocalStorage.getObject("userInfo");
    if (!userInfo.userId && this.$route.fullPath != "/login/") {
      this.$router.push({
        path: `/login/`
      });
    }
  // 获取ApiSetting的配置
    await ApiSetting.config.get();
    this.configLoading = false;
  // 解决vuex 刷新数据丢失问题
    this.$store.dispatch("XXXX");
  },
  data() {
    return {
      configLoading: true
    };
  }
};

modules下的ApiSetting.js

import axios from 'axios'
export default {
  config: {
    data: {},
    get() {
      return new Promise((resolve, reject) => {
        axios.get('serverconfig.json').then(res => {
          this.data = res.data;
          resolve(res.data)
        }).catch((error) => {
          throw error;
        });
      })
    }
  }
}